CSS 水平垂直居中的 N 种方式

居中之前

首先我们创建一对父子元素，并为其设置好颜色大小备用

<div class="content">
	<div class='incont'></div>
</div>

.content {
    width: 250px;
    height:250px;
    margin: 50px;
    padding: 25px;
    background-color: #81b0db;
}

.incont {
	width: 50px;
    height: 50px;
    background: aquamarine;
}

水平垂直居中

我们需要实现的效果图如下：

方法一：absolute + 负margin

父级元素使用相对定位，子元素使用绝对定位，调整其相对于父元素的位置。要求是需要我们知道子元素的宽高。

.content {
    position: relative;
}

.incont {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

方法二：absolute + margin auto

先设置各个方向的距离都是0，再将margin设为auto

.content {
    position: relative;
}

.incont {
 	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

方法三：absolute + calc

这种方法的使用和方法一一样，只是这里使用计算属性表示出来，缺点也是需要知道子元素宽高：

.content {
    position: relative;
}

.incont {
 	position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
}

缺点：IE9 以上才支持。

方法四：absolute + transform

这里使用 transform 属性对子元素进行偏移，好处是不需要知道子元素的宽高，直接用百分比表示即可：

.content {
    position: relative;
}

.incont {
 	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

缺点：IE9 以上才支持。

方法五：vertical-align

首先将子元素转为行内块元素，然后通过父级元素的 text-aline 属性将其水平居中，然后通过设置子元素的 vertical-align 属性将其垂直居中。

.content {
    background-color: #81b0db;
    text-align: center;
    line-height: 250px;/*和高度保持一致*/
}

.incont {
    display: inline-block;
    vertical-align: middle;
    line-height: inherit;
}

下面列举了 vertical-align 属性的值，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐：

方法六：table-cell

我们知道，table 元素默认垂直居中，而通过 css 可以将元素转为 table 类型，代码如下：

.content {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.incont {
    display: inline-block;
}

vertical-align一般作用在内联元素上，主要用于内联元素间在垂直方向上的对齐。不过，vertical-align同样也可以作用于table-cell元素，目的是为了指定table-cell中的内容在垂直方向上相对于table-cell的对齐关系。

缺点：对于设置为display: table-cell的元素，对其设置margin无效。

方法七：flex

通过弹性布局，可以轻易的实现水平垂直居中，甚至都不需要操作子元素：

.content {
    display: flex;
    justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
}

justify-content 属性定义了项目在主轴上的对齐方式。
align-items 属性定义项目在次轴上如何对齐。

对比小结

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC端有兼容要求，宽高不固定，推荐css-table
• PC端无兼容性要求，推荐flex
• 移动端推荐使用flex