# CSS实现垂直居中

### 情形1: 垂直居中一张图片

#middleWrapper {
height: 200px;
line-height: 200px;
}
#middleWrapper > img {
vertical-align: middle;
max-height: 100px;
}
<div class="middleWrapper">
</div>

### 情形2: 垂直居中一行

#middleWrapper {
height: 200px;
line-height: 200px;
text-overflow: ellipsis;
overflow: hidden;
}
#middleWrapper > span {
vertical-align: middle;
white-space: nowrap;
}
<div class="middleWrapper">
<span>It is a truth universally acknowledged that a single man in possession of a good   fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</span>
</div>

It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

### 情形4: 垂直居中一段文字

#middleWrapper {
height: 200px;
line-height: 200px;
}
#middleWrapper > div {
vertical-align: middle;
display: inline-block;
line-height: 1.5;
text-align: justify;
}
<div class="middleWrapper">
<div>It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.</div>
</div>
It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.

#middleWrapper {
height: 200px;
line-height: 1.5;
vertical-align: middle;
display: table-cell;
}
<div class="middleWrapper">
It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.
</div>
It is a truth universally acknowledged that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters.