元素居中总结

行内元素或行内块元素

让行内元素或行内块元素进行居中，需要对其父元素设置文本对齐方式，因为行内元素或行内块元素可以被当做文本处理。

让行内元素或行内块元素水平居中对齐，在其父元素上设置 text-align:center。

让行内元素或行内块元素垂直居中对齐，在其父元素上设置 line-height 属性，行高的值与高度相等即可。

块级元素

① 水平居中对齐

设置元素的左外边距和右外边距的值都为 auto。

注意：

让块级元素居中，是对元素本身进行设置。

浮动的元素以及绝对定位和相对定位的元素不能使用该方法进行居中。

② 水平方向和垂直方向都居中对齐

要实现一个块级元素在父元素里面垂直居中对齐，需要对改元素设置定位；这种方式可以设置元素垂直居中，可以设置元素水平居中。

定位的元素水平居中： 设置 left:50%，设置 margin-left 为负的宽度的一半。

定位的元素垂直居中： 设置top:50%，设置 margin-top 为负的高度的一半。

行内元素和行内块元素的空白

元素之间的空白

① 产生的原因

书写 html 代码的时候，每写一个元素都会换行，这个换行符号会被浏览器解析成空格，空格的大小根据字体大小的设置来计算。

块级元素没有这个问题，因为行内块和行内元素会被当做文本处理。

② 解决方案：

• 方案一： 元素和元素之间不写换行（不建议）
• 方案二：给父元素设置 font-size:0,这样空格就不显示；再给具体的行内元素或行内块元素设置字体大小。

图片（行内块元素）底部幽灵空白

① 产生的原因

图片（行内块元素）会按照基线对齐，基线和底线之间有间距，这个间距就是幽灵空白。

注意：

一般行内块元素如果里面没有文本内容的话会出现跟图片相同的效果；但是如果里面有文本内容，里面的文字会以基线对齐，行内块元素就不存在底部的空白了。

② 解决方案

• 方案一：设置图片（行内块元素）为块级元素（常用，但是如果一行内要显示多个图片（行内块），就不合适了）。
• 方案二：设置图片（行内块元素）的基线对齐方式，vertical-align:bottom,值不是 baseline。
• 方案三：给图片（行内块元素）的父元素设置 font-size:0。