关于CSS水平垂直居中的布局,很多场景中都会用到,而且面试中也基本都是必考题。
于是就有了这篇文章,一方面根据自己所学巩固一下记忆,另一方面也能收集一些自己未曾了解到的解决方案,温故而知新。

如非特别声明,以下CSS布局全以以下html结构为准

1
2
3
<div class="wrapper">
<div class="box"></div>
</div>

使用绝对定位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 公共样式部分,以下绝对定位布局皆默认引用此处代码 */
.wrapper {
position: relative;
width: 300px;
height: 300px;
background: aqua;
}

.box {
position: absolute;
width: 100px;
height: 100px;
background: skyblue;
}

一种方案是给父级元素添加相对定位,子元素设置固定定位 top 值和 left 值为 50%;然后设置 margin-topmargin-left 值为宽度负值的一半:

1
2
3
4
5
6
.box {
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}

使用CSS的calc函数:原理同上,通过calc函数计算得到子元素 top 值和 left50% 减去子元素宽高的一半

1
2
3
4
.box {
top: calc(50% - 50px);
left: calc(50% - 50px);
}

另一种方案是设置子元素各个方向距离都为0,再使用margin: auto外边距设为自适应

1
2
3
4
5
6
7
8
.box {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: skyblue;
}

利用CSS3新特性transform: translate属性,通过定义元素2d方向的位置来达到水平垂直方向居中

  • 此种方案只要设置子元素top值和left值为50%,且子元素平面方向为基于父元素的50%即可达到目的,因此此种方案子元素无需固定宽高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .wrapper {
    /* ... */
    }

    .box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 定义自身x轴和y轴基于父元素偏移-50% */
    }
  • 使用绝对定位各种问题比较多,而且只适用于宽高固定的情况,下面来看看宽高不固定的情况

弹性盒布局

  • 弹性盒布局的好用之处在于使用非常方便,只需指定父元素display: flex即可,下面来看看使用flex的处理方案
1
2
3
4
5
.wrapper {
display: flex; /* 设置元素为 flex 布局 */
justify-content: center; /* 设置子元素水平方向居中 */
align-items: center; /* 设置子元素垂直方向居中 */
}

短短三行CSS代码,即可完成元素水平垂直方向居中,当然flex布局的强大不止于此,日后我会整理一篇关于详细应用flex布局的文章,这里就不再赘述

Grid 网格布局

  • grid布局同样是很优秀的一种布局方案与flex布局有许多相似之处,但只支持高版本浏览器,兼容性不如flex,grid布局处理元素水平垂直居中,同样只需要三行代码:
    1
    2
    3
    4
    5
    6
    7
    8
    .wrapper {
    display: grid; /* 声明元素为grid布局 */
    }

    .box {
    align-self: center; /* 设置自身垂直方向居中 */
    justify-self: center; /* 设置自身水平方向居中 */
    }

表格布局

  • 如果只是为了水平垂直居中一个元素而使用table来实现,未免太闲了,这里要用到的是css的display: table属性,设置子元素为行内块元素,并设置父元素为table布局,再设置子元素水平方向和垂直方向居中即可
1
2
3
4
5
6
7
8
9
.wrapper {
display: table;
vertical-align: middle;
text-align: center;
}

.box {
display: inline-block;
}

结语

目前我所知道的关于CSS实现元素水平垂直方向居中的方案就是这些,如果您也有比较好的方案欢迎通过留言提出来,我会整理到文章中,感谢您的分享