页面布局之单列布局

单列布局的 CSS 实现方式

水平居中

使用inline-block和text-align实现

兼容性好，但是需要同时设置子元素和父元素

.parent {
    text-align: center;
}
.child {
    display: inline-block;
}

<div class="parent">
    <div class="child"></div>
</div>

使用margin实现

兼容性好，但是只适用于子元素指定来宽度的情况

.child {
    width: 200px;
    margin: 0 auto;
}

<div>
    <div class="child"></div>
</div>

使用table+margin实现

需要对 IE6、IE7 做兼容

.child {
    display: table;
    margin: 0 auto;
}

<div>
    <div class="child"></div>
</div>

使用绝对定位+transform实现

需要对transform做兼容，IE9 以上才可用

.parent { 
    position: relative; 
}
.child {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

<div class="parent">
    <div class="child"></div>
</div>

使用flex实现

需要对flex进行兼容，大面积布局可能会影响效率

.parent { 
    position: flex;
    justify-content: center;
}

<div class="parent">
    <div></div>
</div>

垂直居中

使用vertical-align实现

只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block）， 其身上的vertical-align属性才会起作用。

.parent {
    display: table-cell;
    vertical-align: middle;
    height: 20px;
}

或是

.parent { 
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
}

<div class="parent">
    <div></div>
</div>

使用绝对定位实现

.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
}

<div class="parent">
    <div class="child"></div>
</div>

使用flex实现

.parent {
    display: flex;
    align-items: center;
    height: 200px;
}

<div class="parent">
    <div></div>
</div>

水平垂直全部居中

使用vertical-align，text-align，inline-block实现

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center; 
    height: 200px;
}
.child {
    display: inline-block;
}

<div class="parent">
    <div class="child"></div>
</div>

使用绝对定位实现

.parent {
    position: relative;
    height: 200px;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<div class="parent">
    <div class="child"></div>
</div>

使用flex实现

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

<div class="parent">
    <div></div>
</div>