div垂直水平居中的N种方法

前言

div 动态垂直水平居中的方法有很多种,每种实现的方法都值得学习,今天就在这里总结下。

注意布局

1
2
3
<div class="content">
<div class="content-div"></div>
</div>

20190411 新增一个更简单的方法

flex + margin: auto

1
2
3
4
5
6
.content {
display: flex;
}
.content-div {
margin: auto;
}

(已知 div 高度和宽度的情况下)

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
.content {
position: relative;
}
.content-div {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100px;
height: 100px;
}

注意: 父元素有没有高度和宽度都可以实现水平垂直居中,但是子元素一定要设置宽高

方法二

这种方法很好理解,用得也比较多,运用百分比和宽高的负一半实现水平垂直居中

1
2
3
4
5
6
7
8
9
10
.content {
position: relative;
}
.content-div {
position: absolute;
top: 50%;
left: 50%;
margin-left: -(宽度1/2) px;
margin-top: -(高度1/2) px;
}

不知道 div 高度和宽度情况下

方法一

display-table 比较经典的居中方法

1
2
3
4
5
6
7
8
9
10
body {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
.content-div {
margin: 0 auto;
}

方法二

css transform,不方便的是根据浏览器不同需要写些前缀

1
2
3
4
5
6
7
8
9
.content {
position: relative;
}
.content-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

方法三

这是最快最方便的方法了,写 flex 布局建议配合 postcssd 的 Autoprefixer 插件来写,效率会很高,
一般用于移动端

1
2
3
4
5
.content {
display: flex;
justify-content: center;
align-items: center;
}

单用 margin 也是可以的(需要知道 div 高宽度)

1
2
3
4
5
6
7
8
9
10
.content {
height: 600px;
width: 600px;
display: inline-block; <!-- 开启BFC -->
}
.content-div {
margin: 250px;
height: 100px;
width: 100px;
}

关于 BFC 可以参考这篇博客

新增一篇大神写的文章链接,非常详细了23 个垂直居中技巧

结语

以上都是很实用的 div 垂直水平居中方法,多练练,多写写,多积累

文章作者: Rao Jinwei
文章链接: http://shooterblog.site/2017/11/20/div垂直水平居中的N种方法/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明来自 Rao Jinwei's Blog