1.居中

1.1a居中

a居中

// 谁居中给谁
line-height  text-align: center;

1.2万能居中

万能居中

父元素要使用 position: relative;对子元素要使用 position: absolute;
position: absolute;
top: 0;
left: 0;
right: 0
bottom: 0;
margin: auto;

使用定位position: absolute; top:...; right: ...; bottom: ...; left: ...; 四个方向上的值缺一不可。

1.3浏览器计算居中

浏览器计算居中

<div class="parent-box">
    <div class="child-box">让浏览器计算子元素的宽高并让其水平垂直居中</div>
</div> 

.parent-box {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #f00;
}
.child-box {
    position: absolute;
    top: 20%;
    right: 20%;
    bottom: 20%;
    left: 20%;
    background-color: #f54;
}

1.4多行文本居中

多行文本居中，height/多少行

1.5实现图片与文本垂直居中对齐

行内元素vertical-align: middle