【CSS】居中当元素的左右外边距相等的时候，元素就处在中间位置，让两边的间隔相等，最简单的方式就是把左右外边距都设为au

水平居中

外边距

当元素的左右外边距相等的时候，元素就处在中间位置，让两边的间隔相等，最简单的方式就是把左右外边距都设为auto，如果是块级元素通常还需定义宽度。

section {
    width: 40px;
    margin: 0 auto;
}

注意：如果把上下外边距设为auto，并不能实现垂直居中，因为这时候的auto相当于0.

行内块

改变需要居中元素的盒类型，调整为行内块(inline-block)，在父元素中将text-align设置为center，就能实现水平居中。

<div style="text-align: center">
    <section style="display:inline-block"></section>
</div>

在section元素内，如果有子元素，那么子元素会继承居中，里面内容默认就不再是左对齐。

定位

要绝对定位或固定定位，如果是绝对定位，那么容器将会被定义为相对定位，作为元素的包含块；如果是固定定位，那么元素相对视口(此时视口为包含块)居中

由于使用了这两种定位后，元素会脱离正常流，所以容器需要固定高度，避免高度塌陷导致后面的元素挤上来。

这种方法通常将定位元素从包含块的左边界向右偏移50%的距离(也就是容器一般宽度的距离)，再反向偏移元素一半宽度的距离，最后实现居中。

<div style="position:relative;height:100px">
    <section style="position:absolute;left:50%"></section>
</div>

接下来用两种方式实现效果，分别是外边距和位移

如果定位元素的宽度已定义，那么可以用负外边距实现反向偏移，例如宽度是40px，左外边距设为负的二分之一宽度(也就是-20px)

section {
    width: 40px;
    margin-left: -20px;
}

如果定位元素的宽度未知，那么就不能用外边距，这种情况就需要使用css3新增的位移，在水平方向反向位移50%。水平位移中百分数参照的是自身宽度，所以50%就是元素宽度的一半。

section {
    transform: translateX(-50%)
}

伸缩盒

伸缩盒是CSS3引入的新功能，当普通容器被调整为伸缩容器后，如果要让里面的子元素水平居中，那么就相当于主轴的居中对齐。

<div style="display:flex;justify-content: center">
    <section></section>
</div>

伸缩盒不用借助偏移来实现居中，但是使用伸缩盒后，里面的子元素就需要按它的规则来，例如子元素的高度自动等于容器的高度，虽然能解决多列等高问题，但是有时候不需要这样的福利。伸缩盒的兼容性也不容乐观。

垂直居中

行高

只有当容器的高度已知，并且是单行文本时，才能用行高(line-height)实现垂直居中。如果有两行，那么第一行和第二行之间会有行间距，当这个行高和容器高度相等时，第二行就会被挤到容器外。

<div style="height:100px;line-height:100px">
    <p>垂直居中</p>
</div>

注意：如果单行文本改为图像，行高不能实现图像的垂直居中。

内边距

当容器的上下边距相同的时候，容器中的内容就变成了垂直居中。使用这种方法后，容器不能有固定高度，它的高度需要内容撑起。

<div style="padding:50px 0">
    <p>垂直居中</p>
</div>

表格盒类型

在表格的单元格中，用vertical-align属性就能让元素垂直居中，现在用这种方法把普通元素调整为表格元素，模拟出表格的效果。用CSS模拟的表格除了包含表格元素的普通规则之外，还拥有特殊规则，它能够以匿名方式创建缺少的表格元素，例如单元格本来必须在表格行之内，而在模拟的表格中，将元素调整为单元格(使用盒类型table-cell)后，不用把父元素变为表格行(使用盒类型table-row),浏览器会自动创建出表格行。

<div style="display:table">
    <p style="display:table-cell;vertical-align:center">垂直居中</p>
</div>

虽然模拟表格能带来很多便捷，但同时也受到了限制。例如调整过的元素不能用定位和浮动；使用盒类型table-cell时，必须同时有个祖先元素的盒类型是table，变为表格的元素，它的默认宽度不再占一行，因为表格本质上是行内元素。

定位

垂直居中的定位方法和水平居中的定位方法很类似，只是方向不同。例如原先定位元素从包含块的左边界向右偏移，现在改为从顶部向下偏移50%的距离，其它都一样。

<div style="position:relative">
    <section style="position:absolute;top:50%"></section>
</div>

接下来也同样使用两种方法来实现反向偏移。反向偏移的距离根据定位元素来定义，例如元素高度为40px，那么上外边距就是负的二分之高度(也就是-20px)

section {
    height: 40px;
    margin-top: -20px;
}

如果定位元素的高度未知，那么就得用位移，在垂直方向反向位移50%,垂直位移中的百分数参照的是自身高度，所以50%就是元素高度的一半。

section {
    transform: translateY(-50%);
}

伸缩盒

在伸缩容器里，子元素垂直居中，相当于侧轴的居中对齐

<div style="display:flex;align-items:center">
    <section></section>
</div>

常见笔试题

如何让一个浮动元素水平居中？

浮动元素通常会在水平方向上向左或向右移动，如果要居中，首先需要向反方向偏移一定的距离，元素的偏移可以用相对定位和偏移属性实现，代码如下。

.float {
    float: left;
    position: relative;
    /* 偏移容器宽度的一半 */
    left: 50%; 
}

如果容器和浮动元素的宽度都已定义，那么偏移距离可以计算得到。如果浮动元素的宽度未知，那就不能用计算的方式，这时候只能用百分数来实现。

上面的代码把偏移距离设为50%，元素的左边缘被移动到了容器中间的位置，要得到元素居中的效果，可以借用子元素或使用CSS3新增的位移功能。

下面首先介绍子元素的方法，这个方法需要在浮动元素内增加子元素，子元素再做相对定位的反向偏移。例如下面的HTML文档中，子元素section反向偏移了50%，也就是偏移浮动元素一般宽度的距离后，就能实现内容居中。不过，此时需要将原先在浮动元素上的样式迁移到这个子元素中，例如宽度、高度、背景色等。

<div>
    <div class="float">
        <section style="position:relative;left:-50%"></section>
    </div>
</div>

使用CSS3新增的位移功能不需要添加子元素，而是直接让浮动元素反向位移50%就能实现居中，水平位移中的百分数参照的是自身宽度，所以50%就是自身宽度的一半，如下所示。

<div>
    <div class="float" style="transform:translateX(-50%)"></div>
</div>