之前写在博客园上的文章
年前前端圈蛮热闹的，大家撕的挺欢的，阿当想说的并不是固步自封，抵制学习新东西，而是想说要夯实基础，然后对框架有甄别能力的基础上再去有选择的学习。归根结底还是要掌握好根本，也就是道，其余的工具都不过是术，得道了，术这些东西自然手到擒来。好了，胡扯打住。阿当说区别真前端和伪前端其中一点就是能说出几种HTML元素的垂直居中方式。
那我在这里总结一下我get的几种方式。
代码结构如下，父容器，子容器宽高不确定。
<div class="parent">
<div class="child"></div>
</div>
一、实现子容器水平居中的几种方式：
-
利用table元素特性。子容器.child{display: table; margin: 0 auto;}。
table非常像block，但是区别于block的一点是，table具有收缩性（收缩性在这里只是一个比喻，引用自张鑫旭老师，用来形象解释该类属性的特征，从而能够从感性上理解而非死记硬背）即元素默认宽度由内容区决定，表现形式类似inline-block,float,absolute绝对定位等 元素。）同时利用其类block的一点即margin-left: auto, margin-right: auto； 从而实现父容器，子容器宽度都不确定的情况下，子容器绝对居中的效果。优点是代码量小，且都作用于子容器，简单粗暴。缺点是display: table，需要IE8+支持。兼容IE6/7的话，只能将源代码的子容器div标签改成table标签，这样一来，语义化就值得商榷了。 -
利用弹性盒子布局。父容器display: flex; justify-content: center 或者 父容器display: flex; 子容器 margin: 0 auto。
采用Flex布局的元素（即display设置为flex之后），称为Flex容器（flex container），简称"容器"，它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。而flex-item的宽度默认为auto，具有收缩性，此时宽度由内容区决定，此时我们可以使用flex布局中的justify-content
属性，该属性定义了flex itme在主轴（x轴，横轴）上的对齐方式，将其设置为在主轴上居中对齐，从而实现子容器居中。此时我们也可以利用flex itme元素宽度默认为auto的特性，使用 margin-left:auto，margin-right: auto， 实现该子容器的水平居中效果。flex布局强大，但是兼容性比较差，IE10，IE11对弹性布局都是部分支持，IE10需加私有前缀。
结语：我在上述四种实现水平居中的方式里都在反复提及一个概念。即在使用了某种css属性之后，宽度不确定的子容器，此时它的宽度具有了收缩性（宽度由内容宽度决定），从而实现了其在父元素上的水平居中效果！
二、实现子容器的垂直居中的几种方式：
- 父容器display: table-cell; vertical-align: middle。
这里再补充一个巧用vertical-align:middle特性的实现的类似方法（这个方法从张鑫旭老师那里get到的），实现思路就是：- 使得需垂直居中的元素display设为inline-block;
- 设置一个用于辅助的宽度0高度100%的兄弟元素（其作用用于辅助）;
- 将两者的vertical-align设置为middle。
实践如下：
这里加了一个span元素（可以是任意标签哈），将该span元素CSS属性设置为display: inline-block; height: 100%;（width:0; 这里没必要设置了，前面一直在讲inline-block元素具有收缩性，这里span木有内容因而宽度默认即为0）。然后把子容器.child的CSS属性设置为：display: inline-block; vertical-align: middle;
<div class="parent">
<div class="child"></div><span></span>
</div>
- 父容器position: relative; 子容器position: absolute; top: 50%; transform: translateY(-50%);
- 父容器，display: flex; align-items: center。
综上，实现子容器水平、垂直居中对齐的方式有（父容器，子容器宽高不确定。）
- 父容器.parent{text-align: center; display: table-cell; vertiacal-align: middle;}。 子容器.child{display: inline-block;}
- 利用定位。父容器.parent{position: relative;} 子容器.child{position: absolute; top: 50%, left: 50%; transform: translate(-50%, -50%); }
- 利用弹性布局。父容器display: flex; justify-content: center; align-items: center;