水平居中
1、行内元素
text-align:center;
2、块级元素
宽度确定
①width+margin:0 auto;
低版本浏览器可以使用text-align:center;
②position+margin
宽度不确定
①position+transform
②display:flex+justify-content:center
③display:table+margin:0 auto
④display:inline-block+text-align:center
垂直居中
1、行内元素
单行文字垂直居中
height=line-height
2、块级元素
多行文字垂直居中
.parent {
width: 500px;
height: 500px;
background: orange;
display: table;
}
.child {
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
①display:flex+align-items:center;
display:flex;
justify-content:center;
align-items:center;
缺点：兼容性不好
兼容性写法：https://www.jianshu.com/p/49cdc1a0b69b
②position+反向margin
position: absolute;
top: 50%;
left: 50%;
margin-left: div-left;
margin-top: div-top;
优点：兼容性不错
缺点：需要提前知道尺寸，margin-top: -(高度的一半); margin-left: -(宽度的一半);
③position+transform
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
优点：不需要提前知道尺寸
缺点：兼容性不好
④position+margin：auto ***
position: absolute;
left: 0;
top: 0;
right:0;
bottom: 0;
margin: auto;
优点：不需要提前知道尺寸，兼容性好
5、display:table-cell+vertical-align: middle
.parent {
width: 500px;
height: 500px;
background: orange;
display: table-cell;
vertical-align: middle;
}
.child {
width: 200px;
height: 200px;
background: pink;
margin: 0 auto;
}
6、padding
高度固定的情况下可以使用，需要计算尺寸
