前言：一个小问题引起的困惑前几天无意中发现，只用行高等于height的方式，理论上是无法实现div框中的img图片垂直居中的。那么这里的居中是如何实现的呢？经过多次尝试，终于找到了问题所在。原来上图的垂直居中只是一种错觉，只是肉眼看起来是垂直居中的。相对于div框的高度，![]()
的高度越小，“垂直居中”的视觉效果越明显；![]()
的高度越大，img图像的上边缘就越靠近div框的顶部。效果如下：正是因为这个问题的出现，我觉得非常有必要总结一些常用的居中方法来加深对这个模块的理解。1.水平居中1.对于行内（和行内块）元素或者Text-align:center可以直接用于text文本。2.对于块级元素①使用marginauto自适应居中元素。前提是给块级元素设置宽度，否则无法实现自适应②使用定位让子元素左右两边的距离为0，然后使用margin的auto③使用flexlayout和margin中的auto④使用flex布局中的justify-content属性⑤使用CSS3中的positioningandtransform向右移动父元素宽度的一半，然后向左移动自身宽度的一半（与低版本浏览器的兼容性差）。转换成行内块元素，然后使用text-align:center2.垂直居中1.对于行内元素或者单行文本，直接使用行高等于高度。2、对于img、input、textarea等行内块元素①这里以img为例，在父框中添加一个与img平行的空标签（这里使用span），设置空标签的高度为与父元素高度相同，然后将vertical-align的值设置为center来说明：（一）vertical-align的实现关键是需要一个引用对象，添加的空标签作为引用object(二)img后面最好加一个空标签，因为如果加在img前面，最后的效果就是一张图片前面会有一个白色的空隙②使用伪元素::after，原理和上面插入空标签类似③使用定位和变换④使用定位和边距（先将父框向下移动一半，然后将自身向上移动一半）⑤使用定位和边距（距父框顶部和底部的定位距离父框为0，然后使用margin:autoadaptivecentering）⑥让行高等于高度，然后使用vertical-align:middle（记得将父元素的font-size设置为0，因为当fontsize为0时，baseline的位置等于中线的位置可以实现图片真正的垂直居中）3.对于块级元素①使用定位和变换②使用定位和边距（第一种情况）③使用定位和边距（第二种情况）④使用flex布局和margin⑤使用flex布局和align-items属性⑥使用table-cell和vertical-align属性⑦将块元素转换成行内块，然后使用伪元素::after和vertical-align3.水平和垂直居中水平和垂直居中其实就是把上面列举的各种水平居中和垂直居中合理组合起来。下面只是我个人认为比较方便的几个组合。①Positioningandtransform（transform部分可以换成负margin值）②flex布局和margin:auto③使用positioning使子元素到父框的距离为0，然后使用margin:auto实现自适应居中④使用justify-content和flex布局的align-items属性
