如何让 DIV 居中

两种 div 居中方式

绝对定位居中

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.wrapper {
position: absolute;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
</style>

<div class="container">
<div class="wrapper">
<p>hello</p>
</div>
</div>

解释:

position: absolute; 使 wrapper 块脱离了普通流。

top: 0; left: 0; bottom: 0; right: 0; 给 wrapper 块指定了边界到父元素到偏移值,父元素一般为 body 或者声明为 position:relative; 的容器。因此,在此处,将充满整个浏览器。

在普通内容流中,margin:auto; 的效果等同于 margin-top:0; margin-bottom:0; 。然而,在内容块被绝对定位后,脱离了正常的内容流,浏览器会给 margin-top , margin-bottom 相同的值,使元素块在先前定义的边界内居中。

最后,给内容块设置一个高度 height 或宽度 width,能够防止内容块占据所有的可用空间。

负外边距

如果块元素尺寸已知,可以通过以下方式让内容块居中于容器显示:

外边距 margin 取负数,大小为 width/height(无 padding 的情况下)的一半,再加上 top: 50%; left: 50%;

1
2
3
4
5
6
7
8
9
.wrapper {
position: absolute;
width: 960px;
height: 300px;
top: 50%;
left: 50%;
margin-left: -480px; // width/2
margin-top: -150px; // height/2
}

绝对定位居中的扩展

前面讲的绝对定位居中是相对于浏览器,下面几种是对其进行的扩展:

容器内

将内容块的父容器设置为 position:relative;

视觉内

将内容块设置为 position:fixed; 并设置一个较大的 z-index 层叠属性值。

边栏

使用 right:0;left:auto; 固定于屏幕右侧,使用 left:0;right:auto; 固定与屏幕左侧。

响应式

使用 min-width/max-widthmin-height/max-height 属性。

详细可参考 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 一文。

坚持原创技术分享,您的支持将鼓励我继续创作!