用 css 实现水平垂直居中

用 css 实现水平垂直居中的8种方式

效果图

本文将会用多种方式实现上图效果，接下来一一列举。

基本布局

/* 样式 */
.parent {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
.parent .son {
    width: 100px;
    height: 100px;
    background-color: aqua;
}
/* 布局 */
<div class="parent">
    <div class="son"></div>
</div>

parent是父元素类名，son是子元素类名。以上布局为公用代码，后面不再重复。

1 flex 布局

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

这种布局方式只需要几行简单的代码就可以优雅的做到水平垂直居中，也是我目前用的最多的布局方案，Flex布局将成为未来布局的首选方案。兼容 IE 10+。

2 table-cell 布局

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.son {
	display: inline-block;
}

这种布局方式会使元素表现的类似一个表格中的单元格 td，利用这个特性可以实现文字的垂直居中效果，可以让 div 显示的和 table 一样。兼容性不错。

3 absolute + margin auto 布局

.parent {
	position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

这种布局方式要求居中元素的宽高必须固定，通过设置各个方向的值都为0，再令 margin 为 auto，就可以实现元素水平垂直居中了。

4 absolute + 负margin 布局

.parent {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

这种布局方式必须提前知道子元素的宽高。

5 absolute + transform 布局

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

这种布局方式不需要子元素固定宽高，主要是利用 css3 新增的 transform 的 translate 属性，设置相对于子元素自身的宽高，分别向上、向左各偏移50%，就可以实现居中了。兼容性依赖于 translate2d 的兼容性。

6 inline-block + vertical-align 布局

.parent {
    text-align: center;
    line-height: 200px;
}
.son {
    display: inline-block;
    vertical-align: middle;
    /* 修正文字 */
    line-height: initial;
    text-align: left;
}

把子元素设置为行内元素，父元素通过设置 text-align 就可以做到子元素水平居中，子元素设置 vertical-align 可以做到垂直居中，父元素必须设置行高和自身高度一致，另外子元素需要将文字重置为自己想要的效果。

7 margin + transform 布局

.son {
    margin: 50% auto;
    transform: translateY(-50%);
}

8 grid 布局

.parent {
    display: grid;
}
.son {
    align-self: center;
    justify-self: center;
}

兼容性不如 flex，不推荐。