1.居中

1.1a居中

a居中

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

有边框的情况下，ling-height为高度减去边框的2倍

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

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

行内元素vertical-align: middle

1.6自适应居中

定盒子最外层宽度，内层text-align，line-height，margin

1.7浮动元素居中

方法二
https://www.jianshu.com/p/cd7392862ea4

浮动元素居中

我的文集

点击我的头像，查看右方我的文集，查看文章集合