盒子水平垂直居中
1.盒子有固定宽高的情况
<1>{position:absolute; left:0; bottom:0; top:0; right:0; margin:auto;}
<2>{position:absolute;top:50%;left:50%;margin-top:-高度一半;margin-left:-宽度一半;}
2.不清楚盒子宽高的情况
<1>{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
<2>在父元素中添加
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
display: -webkit-flex;
图片水平垂直居中
1.如果图片的宽度小于父元素的宽度,那么可以使用text-align: center;来居中图片
2.如果图片的宽度大于父元素的宽度,但是图片的宽度是已知的,那么可以使用定位流left:50%; margin-left: -图片宽度的一半;
3.如果图片的宽度大于父元素的宽度,但是不知道图片的宽度,那么可以使用给父元素添加text-align: center;给图片添加margin: 0 -100%;
文字水平垂直居中
1.单行垂直居中
如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和所在行的高度line-height相等即可。
2.多行未知高度文字的垂直居中
如果一段内容，它的高度是可变的那么我们可以设定Padding，使上下的padding值相同即可
3.多行文本固定高度的居中
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display属性能够模拟，所以我们可以使用这个属性来让div模拟table就可以使用vertical-align了。注意，display:table和display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个div元素
