DIV块中元素垂直居中

时间：2018-04-30 19:52:11 阅读：170 评论：0 收藏：0 [点我收藏+]

1 DIV块中元素垂直居中

作者：知乎用户
链接：https://www.zhihu.com/question/20543196/answer/99429177
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

block 元素

block 元素利用绝对定位以及负外边距，适用于知道元素的宽度和高度，兼容性好，所以会看到很多远古时代的居中都采用这种办法，参照下图，注意这里的外边距减去的是 block 元素宽度的一半，即
```
margin:-（width/2） px 
```
block 元素利用绝对定位以及 transform ，适用于不知道元素的宽度盒高度，参照下图

</div>

inline 元素

inline 元素的等内边距，上下两边的内边距相等，则中间内容居中，demo 传送门：http://codepen.io/StevenYuysy/pen/grqPvj

inline 元素的行高，行高与容器高度相等，则中间内容居中，demo 传送门：http://codepen.io/StevenYuysy/pen/vGbLrR

如果上面的代码都不生效的话，有可能行内元素是在表格里面，这个时候可以利用inline元素的 CSS 属性 vertical-align ，默认是 baseline 属性，将其设置为 middle，这个属性常用于 inline-level 和 table-cell 的元素。 demo传送门：inline_vertical_demo_3

<span style="display: table-cell; vertical-align: middle" > 注意是行内元素，所以这里用span，不是DIV

</span>

</div>

原文地址：https://www.cnblogs.com/sysnap/p/8974089.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行

DIV块中 元素垂直居中