关于垂直居中问题的小结

  CSS样式的垂直居中一直都不太好理解，没有直接的属性来实现垂直居中，有一个vertical-align也只是针对于文字之间，如果我们想让一整行的文本或者多行文本进行垂直居中，我们应该怎么做呢？

• 单行内容的垂直居中

html代码

<h1>单行元素的垂直居中</h1>

<p class="one">我是单行元素，我要进行垂直居中</p>

css代码

p.one{  width: 500px;
	height: 100px;
	background-color: gray;
	line-height: 100px;
	text-align: center;
}

实现效果是

需要注意的地方是要设置line-height与父元素的行高相同，并且设置text-align为center，才能实现垂直居中的效果。这是因为当把行高设置成与父元素相同时，这个元素的上下方才能空出来，这样才能实现居中的效果。

• 多行垂直居中

html代码

<h1>我是多行元素</h1>
		<div class="two">
			<p class="two1">我是多行元素，</p>
			<p class="two2">我要进行垂直居中</p>
		</div>

css代码

.two{
		    	height: 200px;
		    	background-color: gray;
		    	display: table;
		    	text-align: center;
		    }
		    
		    .two1{display: table-cell;vertical-align: middle;}
		    .two2{display: table-cell;vertical-align: middle;}

效果图如下：

因为vertical-align属性只能应用于行内元素，所以需要将块级元素转化成行内元素，其中的一个方法就是将块级元素变成单元格元素，这里需要在父元素中设置display:table，在子元素中设置display:table-cell，并且vertical-align要设置成middle。