绝对定位垂直居中

一种纯css实现的垂直定位技术,简单方便

我们经常使用margin: 0 auto来使元素水平居中,垂直居中往往是比较麻烦的地方,然而margin: auto也能方便的让元素垂直居中,在申明元素高度的情况下,只需使用下面的 css:

1
2
3
4
5
6
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

注意必须申明元素高度,可以使用%属性和 min-/max-属性。

看下面的示例:

参考:http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

最后更新于 2024-09-23
使用 Hugo 构建
主题 StackJimmy 设计