水平居中、垂直居中、水平垂直居中

1.水平居中

1.1块级元素

text-align:center;

1.2块级元素

注意：需要给标签指定宽度

margin:0 auto;

1.3绝对定位 和 自我位移

position:absolute;
left:50%;
transform:translateX(-50%);

注意：使用绝对定位会使元素脱离文档流?

1.4flex布局

display: flex;
justify-content: center;

2.垂直居中

2.1设置行高和元素高度一致

height:2rem;
line-height:2rem;

2.2绝对定位 和 自我定位

position: absolute;
top: 50%;
transform: translateY(-50%);

2.3flex布局

display: flex;
align-items: center; 

2.4table布局

父元素:
display:table;
子元素：
display:table-cell;
vertical-align:middle;

3.水平垂直居中

3.1父相子绝定位 和 margin

父：
position:relative;
子：
position:absolute;
left:50%;
top:50%;
margin-left:-子元素宽的一半;
margin-right:-子元素高的一半;

3.2父相子绝定位 和 margin

父：
position:relative;
子：
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;

3.3父相子绝 和 transform

父：
position:relative;
子：
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

3.4弹性盒

display:flex;
justify-content:center;
align-items:center;

3.5table-cell

父元素：
display:table-cell;
vertical-align:middle;
text-align:center;

注意：对table-cell元素设置百分比的宽高值时（eg. width:20%）是无效的，但是可以将父元素设置display:table，再将父元素设置百分比宽高，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。