CSS样式的垂直居中一直都不太好理解,没有直接的属性来实现垂直居中,有一个vertical-align也只是针对于文字之间,如果我们想让一整行的文本或者多行文本进行垂直居中,我们应该怎么做呢?
- 单行内容的垂直居中
<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,才能实现垂直居中的效果。这是因为当把行高设置成与父元素相同时,这个元素的上下方才能空出来,这样才能实现居中的效果。
- 多行垂直居中
<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。