你不知道的居中方式（全面水平与垂直居中总结）

    在学vue的路上有些瓶颈期，就想起来了前段时间用过的居中方式，这个技能要一直用到，今天就总结一下css水平与垂直居中的16种方式：

一、水平居中

 1.1行内元素

.parent{
			text-align:center;
		}

 1.2块级元素

  1.2.1块级元素一般居中方式

.son{
			margin:0 auto;
		}

  1.2.2子元素含float

.parent{
				width:fit-content;
				margin: 0  auto;
			}
		.son{
				float:left;
		}

  1.2.3Flex弹性盒子

.parent{
				display:flex;
				justify-content:center;
			}

  1.2.4绝对定位

    1）transform

.son{
					position:absolute;
					left:50%;
					transform:translate(-50%,0);
			}

    2) left:50%

.son{
						position:absolute;
						width:宽度；
						left:50%;
						margin-left:-0.5*(宽度)；
				}

    3) left/right :0

.son{
						position:absolute;
						width:宽度；
						left:0;
						right:0;
						margin: 0 auto；
				}

二、垂直居中

 2.1行内元素（单行文本）

.parent{
			height:高度；
			}
		.son{
				line-height：高度；
		}

 2.2块级元素

  2.2.1行内块级元素

.parent::after, .son{
			display:inline-block;
			vertical-align:middle;
			}
		.parent::after{
				content:' ';
				height:100%;
		}

  2.2.2 table

.parent{
			display:table;
			}
		.son{
				display:table-cell;
				vertical-align:middle;
		}

     优点：元素高度可以动态改变，不需再css中定义，如果父元素没有足够高度的话，该元素内容也不会被截断。
     缺点：IE6、IE7甚至IE8 beta中无效。

  2.2.3 Flex弹性盒子

.parent{
			display:flex;
			align-items:center;
			}

     优点：内容块的宽度任意，优雅的溢出，可用于复杂布局中。
     缺点：IE8、IE9不支持，需要浏览器厂商前缀，渲染容易出现问题。

  2.2.4绝对定位

    1）transform

.son{
						position:absolute;
						top:50%;
						transform:translate(0,-50%);
				}

     优点：代码少
     缺点：IE8不支持，属性需要追加浏览厂商前缀，可能干扰其他的transform效果等。

    2) top:50%

.son{
							position:absolute;
							height:高度；
							top:50%;
							margin-top:-0.5*(高度)；
					}

     优点：适用于所有浏览器
     缺点：父元素空间不够时, 子元素可能不可见(当浏览器窗口缩小时,滚动条不出现时).如果子元素设置了overflow:auto, 则高度不够时, 会出现滚动条。
    3) left/right :0

.son{
							position:absolute;
							width:宽度；
							left:0;
							right:0;
							margin: 0 auto；
					}

    3) top/bottom :0;

.son{
							position:absolute;
							top:0;
							bottom:0;
							margin:  auto 0；
					}

     优点：代码少
     缺点：没有足够的空间时，子元素会被截断，但不会有滚动条。

如有错误，请指正！