文字与元素居中的方式

我们经常会让元素进行上下左右的居中，这里提供几种方法供大家使用。

1. 绝对定位与 margin #

当我们提前知道要居中元素的长度和宽度时，可以使用这种方式：

.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
}
.content {
    background-color: #ccc;
    width: 160px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -80px; /* 宽度的一半 */
    margin-top: -50px; /* 高度的一半 */
}

2. 绝对定位与 transform #

当要居中的元素不定宽和定高时，我们可以使用transform来让元素进行偏移。

.container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
}
.content {
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    text-align: center;
}

3. line-height #

line-height其实是行高，我们可以用行高来调整布局！

不过这个方案有一个比较大的缺点是：文案必须是单行的，多行的话，设置的行高就会有问题。

.container {
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
}
.content {
    line-height: 200px;
}

4. table 布局 #

给容器元素设置display: table，当前元素设置display: table-cell：

.container {
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
    display: table;
}
.content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

5. flex 布局 #

我们可以给父级元素设置为display: flex，利用 flex 中的align-items和justify-content设置垂直方向和水平方向的居中。这种方式也不限制中间元素的宽度和高度。

同时，flex 布局也能替换line-height方案在某些 Android 机型中文字不居中的问题。

.container {
    width: 300px;
    height: 200px;
    border: 1px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}
.content {
    background-color: #ccc;
    text-align: center;
}

6. 总结 #

每种上下左右居中的方案都有不同的适用场景，现在通常是第 2 种方案和第 5 种方案适用的比较多。