css中的实现垂直水平居中其中方法

简介

在面试的时候css 面试题里面基本上都会问一个元素垂直水平居中,其实这个有多种方式实现,同时元素可以是固定宽高、不固定宽高的。

固定宽高

  • 方式一:position absolute + 负 margin
  • 方式二:position absolute + margin auto
  • 方式三:position absolute + calc

不固定宽高

  • 方式四:position absolute + transform
  • 方式五:css-table
  • 方式六:flex
  • 方式七:grid

下面就直接上代码,公用的html代码css代码就写在这里后面都会在这个基础上增加代码。
html 公用代码

1
2
3
4
5
<div class="container">
<div class="box-center">
box-center
</div>
</div>

css 公用代码

1
2
3
4
5
6
7
8
9
10
11
.container {
width: 500px;
height: 300px;
border: 1px solid red;
}
.box-center {
width: 100px;
height: 100px;
background-color: red;
color: #fff;
}

有两个元素它们是父子级的关系,要达到的效果是子元素要在父元素中垂直水平居中

固定宽高

固定宽高的意思就是要居中的这个元素它的宽高都是固定的值,下面一个一个用代码实现。

position absolute + 负 margin

css 代码如下:

1
2
3
4
5
6
7
8
9
10
11
/* 此处引用上面的公共代码 */
.container {
position: relative;
}
.box-center {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

利用绝对定位让子元素基于父元素的左上角偏移 50%,但是这样不是真正的居中因为它多移动了本身元素的宽度的一半高度的一半,这个时候我们可以通过负margin来修正这个问题,所以就有了-50px这两个属性。

position absolute + margin auto

css 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
/* 此处引用上面的公共代码 */
.container {
position: relative;
}
.box-center {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

这种方式通过设置各个方向的距离都是 0,此时再讲 margin 设为 auto,就可以在各个方向上居中了。

position absolute + calc

css 代码如下:

1
2
3
4
5
6
7
8
9
/* 此处引用上面的公共代码 */
.container {
position: relative;
}
.box-center {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}

通过calc计算属性减去元素本身高度和宽度的一半。

不固定宽高

固定宽高的意思就是要居中的这个元素它的宽高都是不固定的值,不固定宽高的方法是可以覆盖上面固定宽高的方法,下面一个一个用代码实现。

position absolute + transform

css 代码如下:

1
2
3
4
5
6
7
8
9
10
/* 此处引用上面的公共代码 */
.container {
position: relative;
}
.box-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

修复绝对定位的问题,还可以使用 css3 新增的transformtransformtranslate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了。

css-table

css 代码如下:

1
2
3
4
5
6
7
8
9
/* 此处引用上面的公共代码 */
.container {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box-center {
display: inline-block;
}

通过display: table-celldiv元素变为table元素的实现效果,通过这个特性也可以实现垂直水平居中。

flex

css 代码如下:

1
2
3
4
5
6
7
8
9
/* 此处引用上面的公共代码 */
.container {
display: flex;
justify-content: center;
align-items: center;
}
.box-center {
text-align: center;
}

通过flex的两个属性实现垂直水平居中。

grid

css 代码如下:

1
2
3
4
5
6
7
8
9
/* 此处引用上面的公共代码 */
.container {
display: grid;
justify-items: center;
align-items: center;
}
.box-center {
text-align: center;
}

通过grid布局实现居中,如果grid不太了解可以看grid 布局

其他

有两种比较特殊的垂直水平居中的方式,应用场景比较少或者代价比较大,所以在这几记录一下如下:

  • 行内元素居中
  • table 布局

行内元素居中

css 代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
/* 此处引用上面的公共代码 */
.container {
text-align: center;
line-height: 300px;
font-size: 0; // 兼容代码
}
.box-center {
display: inline-block;
vertical-align: middle;
line-height: initial;
font-size: 14px;
}

container设置为行内元素,通过text-align就可以做到水平居中,通过vertical-align也可以在垂直方向做到居中。

table 布局

改变html结构如下:

1
2
3
4
5
6
7
8
9
<table>
<tbody>
<tr>
<td class="container">
<div class="box-center">box-center</div>
</td>
</tr>
</tbody>
</table>

css代码如下:

1
2
3
4
5
6
7
/* 此处引用上面的公共代码 */
.container {
text-align: center;
}
.box-center {
display: inline-block;
}

利用table属性实现。

总结

上面实现总结如下面表格所示:

方法 居中元素定宽高固定 PC 兼容性 移动端兼容性
position absolute + 负 margin 固定宽高 ie6+, chrome4+, firefox2+ 安卓 2.3+, iOS6+
position absolute + margin auto 固定宽高 ie6+, chrome4+, firefox2+ 安卓 2.3+, iOS6+
position absolute + calc 固定宽高 ie9+, chrome19+, firefox4+ 安卓 4.4+, iOS6+
position absolute + transform 不固定宽高 ie9+, chrome4+, firefox3.5+ 安卓 3+, iOS6+
css-table 不固定宽高 ie8+, chrome4+, firefox2+ 安卓 2.3+, iOS6+
flex 不固定宽高 ie10+, chrome4+, firefox2+ 安卓 2.3+, iOS6+
grid 不固定宽高 ie10+, chrome57+, firefox52+ 安卓 6+, iOS10.3+
table 布局 不固定宽高 ie6+, chrome4+, firefox2+ 安卓 2.3+, iOS6+
行内元素居中 不固定宽高 ie6+, chrome4+, firefox2+ 安卓 2.3+, iOS6+

推荐用法:

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

以后肯定grid会大方异彩。

参考

CSS 实现水平垂直居中的 1010 种方式 原创