前言：由一个小问题引发的困惑
前几天偶然发现只用行高等于高就可以让img图片在div盒子里垂直居中，理论上是不可行的，那么这里的居中到底是怎么实现的呢？
经过几次尝试，终于找到了问题所在，原来上面的图片垂直居中只是个假象，只是肉眼看起来像是垂直居中的罢了。相对于div盒子的高度，<img>的高度设置得越小，“垂直居中”的视觉效果就越明显；<img>的高度越大，img图片上边沿就会离div盒子的顶部越近，效果如下：
也正是因为这个问题的出现，让我觉得非常有必要对一些常见的居中方法进行一次总结，以加深对这个模块的理解
一.水平居中
1.对于行内(以及行内块)元素 或者 文字文本
直接用text-align:center即可
2.对于块级元素
①利用margin的auto让元素自适应居中，前提是要给该块级元素设置宽度，否则无法实现自适应
②利用定位使子元素到左右两边的距离都为0，再用margin的auto
③利用flex布局和margin里的auto
④利用flex布局中的justify-content属性
⑤利用定位和CSS3中的transform，先向右移动到父元素宽度的一半，再向左移动自身宽度的一半（对低版本的浏览器兼容性较差）
⑥原理和上面的⑤一样，只是把transform部分换成了margin-left（兼容性更好）
⑦先将块元素转化成行内块元素，再用text-align:center
二.垂直居中
1.对于行内元素 或者 单行文本
直接用行高等于高即可
2.对于img、input、textarea等行内块元素
①这里用img举例，在父盒子中添加一个和img并列的空标签（这里用的span），将空标签的高度设置为和父元素一样高，然后再设置vertical-align的值为center即可
说明：（Ⅰ）vertical-align能够实现的关键在于需要一个参照物，而添加的空标签就起到了参照物的作用 （Ⅱ）最好在img的后面添加空标签，因为如果添加在img前面的话，最终效果是图片前面会出现白色的空隙
②利用伪元素::after，原理和上面的插入空标签相似
③利用定位和transform
④利用定位和margin（先向下移动父盒子的一半，再向上移动自身的一半）
⑤利用定位和margin（定位距离父盒子上下边都为0，再使用margin:auto自适应居中）
⑥让行高等于高，再用vertical-align:middle(记得要将父元素的font-size设置为0，因为当字体大小为0时，基线的位置才等于中线的位置，就能实现图片真正的垂直居中)
3.对于块级元素
①利用定位和transform
②利用定位和margin（第一种情况）
③利用定位和margin（第二种情况）
④利用flex布局和margin
⑤利用flex布局和align-items属性
⑥利用table-cell和vertical-align属性
⑦将块元素转化为行内块，然后利用伪元素::after和vertical-align
三.水平垂直居中
水平垂直居中其实就是把上面分别列举的各种水平居中和垂直居中合理的组合起来，下面就只列举几种我个人认为比较方便的组合方式
①定位和transform（transform部分换成负margin值也可以）
②flex布局和margin:auto
③用定位让子元素距离父盒子的上下左右都为0，然后用margin:auto实现自适应居中
④用flex布局的justify-content和align-items属性
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。