css居中完全指北

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;
}

块级元素的水平垂直居中

不定宽高 通用方案

1. flex大法

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

2. transform方式

• 50%是相对于父元素进行的移动，translate是相对与自身的宽高进行的移动，二者一起作用才能使偏移正确

position :absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)

3. table布局

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
    display: inline-block; // table布局方法下子元素得是行内
}

已知宽高的情况

4. margin负值方案

• 同方案2类似，这里是使用margin负值来处理元素本身的偏移

width: 100px;
height: 100px;
position : absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;

5. 绝对布局的方式

• top left right bottom 相等就行，可以不为0

width: 1px;
height: 1px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;