CSS实现水平垂直居中总结

1 利用position:absolute水平/垂直居中

// 上下
position: absolute
top: 0;
bottom：0；
margin: auto;

// 左右
position: absolute
left: 0;
right：0；
margin: auto;

// 上下左右居中
position: absolute
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

2 利用行内元素水平垂直居中

// 水平
text-align: center;

// 垂直
height: 38px
line-height: 38px
// line-height = height

3 块级元素水平居中

4 块元素垂直居中

5 利用vertical-align实现inline-block元素垂直居中
1）单行元素

line-height = height // parent
vertical-align：middle // self

vertical-align只能应用在行内元素和单元格元素

长度和百分比是基于基线进行上（正值）下（负值）移动

2）多行元素垂直居中