文字图片垂直居中小记

1.      单行文本垂直居中

一般是设置元素的css line-height等于元素的height，原理：

Line-height设置的是行与行之间的基线之间的最小距离而不是最大的距离，line-height的大小减去字体的高度的值除以2，将这部分的距离放置在字体的上下，这样当元素的高度等于行高时，字体就会居中。

div{
height:30px;
line-height:30px;
 background-color:#888;
}
<div>文字当行居中</div>

2.      图片垂直居中

将图片所在的容器的line-height设置为与容器的高度height相等，并设置img的vertical-align:middle

原理：

Img为inline元素，行内的元素在同一行会形成一个看不见的行框，在同一行中各个行内元素的中的文字（图片）的基线会以最高的元素的的基线对齐，将容器的line-height设置为与height通过，会将行内元素居中，原理如一所述，那么元素的基线会在元素的中央位置，即容器的基线位置会在容器的中央位置，再将img的vertical-align设置为middle，即将img的中线与父元素的基线对齐，那么就会将图片居中在容器的中间。

div{
height:600px;
line-height:600px;
}
div img{
vertical-align:middle;
}

<div>
    <img src=”1.jpg”/>
</div>

3.      文本多行居中

<div style="height:100px;background-color: chartreuse;"><span style="">第一行的内容<br/>第二行的内容</span>x</div>

对于文本多行居中我是这样认为的，对于上边的代码和图，我的理解是这样的：

Span和x在同一行，构成了一个行框，其中的文字要与最高的行内框的底线（就是x的下边缘）对齐，所以呈现出如上的效果。父元素的底线就是x的下边缘，现在添加以下代码：

<div style="height:100px;background-color:chartreuse;line-height:100px;"><span style="">第一行的内容<br/>第二行的内容</span>x</div></span>

这样的效果图如下图所示：

由于设置了行高，第一行和第二行的距离是100px，而x对齐了底线，x的下边缘就是div的底线，那么想让span垂直居中，需要将x的line-height设置为100px，这样x应该出现在绿色的中间，由于span有两行高度大于了100，所以出现了上边的现象，如此，只需改变span的行高即可，代码如下：

<div style="height:100px;background-color:chartreuse;line-height:100px;"><span style="line-height:18px;">第一行的内容<br/>第二行的内容</span>x</div>

哦，问题来了，效果没变化，原因是span是行内元素，设置line-height，height，margin-top，margin-bottom是没用的，这样只需将span的display设为inline-block就行了，即保证了行内元素的性质（即与x对齐），又可以改变line-height：

<div style="height:100px;background-color:chartreuse;line-height:100px;">
     <span style="line-height:18px;display:inline-block">第一行的内容<br/>第二行的内容</span>x
</div>

这样可以看出，x在中央了，但是span的下边与x对齐，这是采用vertical-align为middle就行了，即让span的中线与父元素div的底线对齐，

<div style="height:100px;background-color:chartreuse;line-height:100px;">
     <spanstyle="line-height:18px;display:inline-block;vertical-align:middle;">第一行的内容<br/>第二行的内容</span>x
</div>

按照我的理解一个元素的底线是不确定的，由其中的x的下边缘决定。

之后去掉x，效果依然一样：

<div style="height:100px;background-color:chartreuse;line-height:100px;">
    <span style="line-height:18px;display:inline-block;vertical-align:middle;">第一行的内容<br/>第二行的内容</span>
</div>

再添加text-align为center

<div style="height:100px;background-color: chartreuse;line-height:100px;text-align:center;">
       <span style="line-height:18px;display:inline-block;vertical-align:middle;">第一行的内容<br/>第二行的内容</span>
</div>