htmlbody垂直居中显示史上最全 CSS实现程度垂直居中方法

要实现上图的效果看似很大略，实则暗藏玄机，下面总结了一下CSS实现水平垂直居中的办法大概有下面这些，come

仅居中元素定宽高适用

absolute + 负marginabsolute + margin autoabsolute + calc

居中元素不定宽高

htmlbody垂直居中显示史上最全 CSS实现程度垂直居中方法 Bootstrap

absolute + transformlineheightwriting-modetablecss-tableflexgridabsolute + 负margin

为了实现上面的效果先来做些准备事情，假设HTML代码如下，统共两个元素，父元素和子元素

wp是父元素的类名，box是子元素的类名，由于有定宽和不定宽的差异，size用来表示指定宽度，下面是所有效果都要用到的公共代码，紧张是设置颜色和宽高

把稳：后面不在重复这段公共代码，只会给出相应提示

/ 公共代码 /.wp { border: 1px solid red; width: 300px; height: 300px;}.box { background: green; }.box.size{ width: 100px; height: 100px;}/ 公共代码 /

绝对定位的百分比是相对付父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中央居中显示

为了改动这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了，css代码如下

/ 此处引用上面的公共代码 // 此处引用上面的公共代码 // 定位代码 /.wp { position: relative;}.box { position: absolute;; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px;}

这是我比较常用的办法，这种办法比较好理解，兼容性也很好，缺陷是须要知道子元素的宽高

absolute + margin auto

这种办法也哀求居中元素的宽高必须固定，HTML代码如下

这种办法通过设置各个方向的间隔都是0，此时再讲margin设为auto，就可以在各个方向上居中了

/ 此处引用上面的公共代码 // 此处引用上面的公共代码 // 定位代码 /.wp { position: relative;}.box { position: absolute;; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}

这种方法兼容性也很好，缺陷是须要知道子元素的宽高

absolute + calc

这种办法也哀求居中元素的宽高必须固定，以是我们为box增加size类，HTML代码如下

感谢css3带来了打算属性，既然top的百分比是基于元素的左上角，那么在减去宽度的一半就好了，代码如下

/ 此处引用上面的公共代码 // 此处引用上面的公共代码 // 定位代码 /.wp { position: relative;}.box { position: absolute;; top: calc(50% - 50px); left: calc(50% - 50px);}

这种方法兼容性依赖calc的兼容性，缺陷是须要知道子元素的宽高

absolute + transform

还是绝对定位，但这个方法不须要子元素固定宽高，以是不再须要size类了，HTML代码如下

修复绝对定位的问题，还可以利用css3新增的transform，transform的translate属性也可以设置百分比，其是相对付自身的宽和高，以是可以讲translate设置为-50%，就可以做到居中了，代码如下

/ 此处引用上面的公共代码 // 此处引用上面的公共代码 // 定位代码 /.wp { position: relative;}.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

这种方法兼容性依赖translate2d的兼容性

lineheight

利用行内元素居中属性也可以做到水平垂直居中，HTML代码如下

把box设置为行内元素，通过text-align就可以做到水平居中，但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中，代码如下

/ 此处引用上面的公共代码 // 此处引用上面的公共代码 // 定位代码 /.wp { line-height: 300px; text-align: center; font-size: 0px;}.box { font-size: 16px; display: inline-block; vertical-align: middle; line-height: initial; text-align: left; / 改动笔墨 /}

这种方法须要在子元素中将笔墨显示重置为想要的效果

writing-mode

很多同学一定和我一样不知道writing-mode属性，感谢@张鑫旭老师的反馈，大略来说writing-mode可以改变笔墨的显示方向，比如可以通过writing-mode让笔墨的显示变为垂直方向

<div class=\"大众div1\公众>水平方向</div><div class=\公众div2\"大众>垂直方向</div>.div2 { writing-mode: vertical-lr;}

显示效果如下：

水平方向垂直方向

更神奇的是所有水平方向上的css属性，都会变为垂直方向上的属性，比如text-align，通过writing-mode和text-align就可以做到水平和垂直方向的居中了，只不过要轻微麻烦一点

<div class=\"大众wp\"大众> <div class=\"大众wp-inner\"大众> <div class=\公众box\公众>123123</div> </div></div>/ 此处引用上面的公共代码 // 此处引用上面的公共代码 // 定位代码 /.wp { writing-mode: vertical-lr; text-align: center;}.wp-inner { writing-mode: horizontal-tb; display: inline-block; text-align: center; width: 100%;}.box { display: inline-block; margin: auto; text-align: left;}

这种方法实现起来和理解起来都轻微有些繁芜

table

曾经table被用来做页面布局，现在没人这么做了，但table也能够实现水平垂直居中，但是会增加很多冗余代码

tabel单元格中的内容天然便是垂直居中的，只要添加一个水平居中属性就好了

.wp{ text-align:center;}.box{ display:inline-block;}

这种方法便是代码太冗余，而且也不是table的精确用法

css-table

css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中

下面通过css属性，可以让div显示的和table一样

.wp{ display:table-cell; text-align:center; vertical-align:middle;}.box{ display:inline-block;}

这种方法和table一样的事理，但却没有那么多冗余代码，兼容性也还不错

flex