不管是初学CSS还是面试考题,如何垂直居中一直是个老生常谈的话题,可能你知道很多方法,但是到底哪一个最好往往还是模棱两可,因此将在这里一一探讨各种方法。
- 基于绝对定位的解决方法
- 兼容 IE6+
- 优点 兼容性极好
- 缺点 代码耦合,需要定宽高
代码如下:
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -9em;
width: 18em;
height: 6em;
}
这段代码通过绝对定位,将元素偏移到左上50%的地方,此时将是垂直居中的状态,继续设置其宽高,此时将以左上角垂直居中的点为扩展向右下扩张,所以需要通过margin
将其左上方向再次偏移宽高的一半,从而达到垂直居中的效果。
- 基于绝对定位的解决方法(升级版)
- 兼容 IE9+
- 优点 代码简洁
- 缺点 代码耦合,需要定宽高
代码如下:
div{
position: absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;
}
通过使用calc
属性,省去不必要的代码。
- 基于绝对定位的解决方法(最终版)
- 兼容 IE9+
- 优点 代码简洁,不用定宽高
- 缺点 无法兼容IE8
代码如下:
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
- 基于绝对定位的解决方法(PC兼容版最佳实践)
- 兼容 IE6+
- 优点 代码简洁,不用定宽高
- 缺点 需要绝对定位
代码如下:
div{
position: absolute;
left: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
通过使用绝对定位元素上下左右偏移设置为0,使其在水平和垂直方向都具有流动性,最后margin
将从水平和垂直方向平分剩余空间。
- 基于视口单位的解决方法
- 兼容 IE9+
- 优点 代码简洁,不用定宽高,不用绝对定位
- 缺点 无法兼容IE8
在css3中,定义了一些新的单位vh,vw,vmin,vmax
,1vh
等于视口高度的1%
,也就是100vh
等于视口的100%
,vmin,vmax
分别是视口中较小值和较大值,于是我们有以下代码:
div{
width: 18em;
margin: 50vh auto 0;
transform: translate(-50%);
}
- 基于Flexbox的解决方案(移动端最佳解决方案)
- 兼容 IE9+
- 优点 代码简洁,不用定宽高,不用绝对定位
- 缺点 无法兼容IE8
Flexbox就是针对这个需求而被设计出来的,所以其便捷与简单性简直是开辟一个新天地,代码如下:
body{
display: flex;
}
div{
margin: auto;
}
看,就是这么简单,只需要一个容器设置flex
布局,然后设置margin
,它就会自动垂直居中,当然我们也可以不用容器,代码如下:
div{
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
margin: auto;
}
通过align-items
设置垂直居中,使用justify-content
水平居中,最后使用margin
均分剩余空间达到垂直居中效果,实在是美滋滋。
其它居中方法,可自行百度,这里不推荐:
- 行内文本垂直居中(近似垂直居中)
- 表格布局法(兼容性还可以)