1.居中

1.1a居中

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

1.2万能居中

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

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文本居中

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

1.6自适应居中

1.7浮动元素居中

我的文集