水平、垂直居中布局方案整理
讨论前提
本文都是基于这样的HTML结构来进行讨论的：
<div class="parent"> <div class="child">DEMO</div> </div>水平居中
inline-block：inline-block + text-align
.parent{ text-align: center; } .child{ display: inline-block; } inline-block 是个很特殊的属性，既有 inline 文本的特性，又有 block 布局的特性；因此，用上 inline-block ，既可以让div像文本一样居中（ text-align: center; ），又不会影响div本身的宽高。
这个方案有个缺陷，就是由于在parent上设置了 text-align: center ，因此child里的元素都会继承这个 text-align: center ，需要重新设置个 text-align: left 来reset一下。
display: table/block + margin
这种方法非常常用，适用于需要用 position:static 把盒子撑起来的情况下的水平居中。但值得注意的是，使用 block 的话，child的默认宽度会撑满整个parent，因此需要显式地定义其 width ；而使用 table 的话，其默认宽度为child的内容宽度，这样一来，即使加上padding和border，也能顺利实现水平居中，在实际场景中是比 block 要好用的。
.child{ display: table; //display: block; margin: 0 auto; } 垂直居中
表格单元特性（table-cell）：table-cell + vertical-align
.parent{ display: table-cell; vertical-align: middle; } 这个方案可能有一点费解，毕竟 表格布局 已经是上世纪的布局方式了，但当时布局所用到的一些特性，还一直被浏览器兼容着，其中就包括这个 table-cell 的方案。
从某种意义上来看，跟 inline-block方案 很相像，都是利用了文本排版的特性，但差别在于，本方案并不需要把child设置为inline-block也可生效。
水平、垂直同时居中
负值的margin：absolute + margin
这种方法也比较常用，先利用 positions: absolute;left: 50% 的特性，使child的左侧移至parent的水平中央处，然后再施以负的 margin-left 使child水平左移child宽度的一半距离，即最终使child的水平中央与parent的水平中央重合；在垂直方向上，也是一样的原理。
这个方法用起来不复杂，原理也很容易理解，但是缺点也非常明显：
-
要求child的宽度必须是固定的，而这在如今响应式布局横行的时代，似乎是有点过时了。
-
parent设置relative关系倒不大，但是child变absolute就脱离文档流了。
.parent { position: relative; } .child { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; //为width的一半，且为负值 margin-top: -100px; //为height的一半，且为负值 }
负margin的替代方案：absolute + transform
从上文可知，负margin方案的问题在于要确定width和height，无法做到自适应；于是，为了要做到自适应，我们可以把负margin换成transform实现child自身的偏移。
.parent{ position: relative; } .child{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } 由于transform这一属性在设置百分比类型的值时，其参照对象是自身，因此只需要各设置50%，就能实现往水平方向偏移自身宽度的一半，又或者是往垂直方向偏移自身高度的一半。总体来说，这个方案灵活是够灵活的了，但是transform的兼容性堪忧，移动端还好说，PC端怎么敢用？
flex + justify-content + align-items
跟上文的transform方案想必，flex（弹性盒子）的方案兼容性就更令人担忧了，PC端不要闹了，连移动端要兼容起来也很麻烦，基本上是只能使用 老版的弹性盒子 了。
.parent{ display: flex; justify-content: center; //水平居中，相当于text-align align-items: center; //垂直居中，相当于vertical-align } 文本式终极居中： inline-block + text-align + table-cell + vertical-align
.parent{ text-align: center; display: table-cell; vertical-align: middle; } .child{ display: inline-block; } 很容易便能看出，这其实是 inline-block水平居中 方案以及 table-cell垂直居中 方案的合用，也算是把文本排版的特性都利用了个遍了。
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
