57. 居中总结 {ignore}

[toc]

居中：盒子在其包含块中居中

1. 行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素 text-align:center。

行盒只可能处于常规流。

2. 常规流块盒水平居中

定宽，设置左右margin为auto

3. 浮动元素水平居中

简书 如何实现浮动元素水平居中(三种方法)

方法1 - 给浮动元素套上一层div，该div的宽度与浮动元素的宽度值相同，先让这个div水平居中。

.container {
    width: 400px;
    height: 100px;
    border: 1px solid #ddd;
}
.content {
    width: 100px;
    margin: 0 auto;
}
.content .left {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}

<div class="container">
    <div class="content">
        <div class="left">left</div>
    </div>
</div>

效果：

方法2 - position设置为relative，相对定位。

可实现宽度不固定的浮动元素的水平居中。

.container {
    width: 400px;
    height: 100px;
    border: 1px solid #ddd;
}

.content {
    float: left;
    position: relative;
    left: 50%;
}

.left {
    float: left;
    position: relative;
    right: 50%;

    width: 100px;
    height: 100px;
    background-color: red;
}

<div class="container">
    <div class="content">
        <div class="left">left</div>
    </div>
</div>

效果：

方法3 和 方法2 本质上是一样的。都是这是 position 为 relative 相对定位。

这3种方式的本质都是一样的，都是给浮动元素套上一个父级，并创建BFC，然后让这个父级居中，这样就能间接地实现浮动元素的居中效果了。

4. 绝对/固定定位元素的水平居中

定宽，设置左右的坐标为0（left:0, right:0），将左右margin设置为auto

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况。

同理：垂直居中的话，只要将 top、bottom 设置为 0，然后将上下 margin 设置为 auto 即可（即：7. 绝对定位的垂直居中）。

5. 单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

6. 行块盒/块盒内多行文本的垂直居中

没有完美方案，可以设置盒子上下内边距相同，达到类似的效果。

7. 绝对定位的垂直居中

定高，设置上下的坐标为0（top:0, bottom:0），将上下margin设置为auto