要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居中方法。
单行文本垂直居中
将包含文字元素的容器行高设置为大于字体大小。默认情况下，文字上下部分会留有相同的空间，因而实现了文字的垂直居中。
html部分：
<body>
<div id="parent">
<div id="child">Text here</div>
</div>
</body>
css部分：
*{
padding:0;
margin:0;
}
#child {
line-height: 200px;
background: palevioletred;
}
垂直居中图片
line-height还可以实现图片的垂直居中，只需要在包含图片的父元素上设置 line-height 然后为图片设置 vertical-align: middle。
html部分：
<body>
<div id="parent">
<img src="https://avatar.csdn.net/0/9/E/3_u013565133.jpg" alt="" />
</div>
</body>
css部分：
*{
padding:0;
margin:0;
}
#parent {
line-height: 200px;
background: paleturquoise;
/* text-align: center; */
}
#parent img {
vertical-align: middle;
}
多行文本垂直居中
父级元素高度不固定
父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：
html部分：
<div id="parent">
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中。
</div>
css部分：
*{
padding:0;
margin:0;
}
#parent{
width: 300px;
border: 1px solid red;
padding: 50px 0px;
}
父级元素高度固定
首先对vertical-align有个认识，vertical-align 只对 table-cell 以及 inline-element 起作用，vertical-align 的值是相对于其父元素的，父元素必须是行内元素。
- 对于一行文字来讲，该属性的值是相对于行高（line-height）的。
- 对于 table-cell，该属性的值是相对于表格的行高的。
结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性display: table;然后再添加一个div包含文本内容，设置其display:table-cell;vertical-align:middle;
vertical-align 对于块级元素不起作用，例如我们无法用它去垂直居中一个div中的p元素，因此这个方法通常不是垂直居中的最优选择。
html部分：
<body>
<div id="outer">
<div id="middle">
这是固定高度多行文本垂直居中，
这是固定高度多行文本垂直居中，
这是固定高度多行文本垂直居中，
这是固定高度多行文本垂直居中。
</div>
</div>
</body>
css部分：
*{
padding:0;
margin:0;
}
#outer{
height: 200px;
border: 1px solid red;
display: table;
}
#middle{
display:table-cell;
vertical-align:middle;
}
对于块级元素的垂直居中思路可以参考水平居中方法，博客里有总结到。
842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
