一. 目的：
知道在某种场景下该使用何种居中。
二. 内容
1. 简单的水平居中
1.1 text-align: center;
使用场景 作用在block上，使文本或子元素在block里水平居中
1.2 margin: 0 auto;
使用场景：让声明了宽度的块级元素水平居中。固定宽度水平居中，大部分网页都是这样布局。
2 垂直居中
2.1 上下padding相等
使用场景： 适用于子元素高度不确定、父容器高度不固定的情景
2.2 设置height与line-height相等
使用场景： 能确定被居中的元素只有一行，比如单行文本、按钮等
3 垂直水平绝对居中
使用场景： 父容器宽高不确定的情景，可用于适应不同的屏幕
3.1 此种适用于被居中元素宽高固定时
E {
width:200px;
height: 100px;
position: absolute/fixed;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}
3.2 此种适用于被居中元素宽高固定或不固定时
E {
position: absolute/fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)；
}
三 . 补充：
第3种绝对居中通常应用于页面大小为viewport全屏的时候。把页面大小为viewport全屏有2中方法。
-
设置宽高为100%，适用于网页首页、次页都为全屏的情景。
body, html, F { height: 100%; } -
设置相对定位，适用于弹框等不用翻页的页面。
F { position: absolute/fixed; top: 0; right: 0; bottom: 0; left: 0; }
