css的水平垂直居中问题太常见了，整理一波
行内单行文本
行内元素的水平居中比较常见
text-align: center;
行内元素多行文本的垂直居中,可以用table布局来解决，当然了flex大法也能妥妥搞定
<div class="container">
<span class="center">多行文本xxxxxx</span>
</div>
.container {
display: table;
}
.center {
display: table-cell;
vertical-align: middle;
}
块级元素的水平垂直居中
不定宽高 通用方案
- flex大法
display: flex;
justify-content: center;
align-items: center;
- transform方式
- 50%是相对于父元素进行的移动，translate是相对与自身的宽高进行的移动，二者一起作用才能使偏移正确
position :absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
- table布局
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block; // table布局方法下子元素得是行内
}
已知宽高的情况
- margin负值方案
- 同方案2类似，这里是使用margin负值来处理元素本身的偏移
width: 100px;
height: 100px;
position : absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
- 绝对布局的方式
- top left right bottom 相等就行，可以不为0
width: 1px;
height: 1px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
