css之垂直居中

该文章由 leevare 发布于 ,归类于 HTML/CSS

使用vertical-align:middle这个属性即可实现效果。但会发现,很多时候,使用这个属性的时候,根本不起作用,这是由于vertical-algin只针对inline-block方式显示的元素才会生效。当然,还有一个关键因素,其还要有兄弟节点,必须也要是inline-block方式显示的。

知道了这些前提,就可以使用如下的这种方式来实现效果。

有如下结构,想实现p中的内容垂直居中。

<div class="vm">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

css的写法

.vm:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}
.vm p {
    display: inline-block;
    vertical-align: middle;
}

使用上述方式,可以轻松实现垂直居中效果。

不过,现在css3的flex布局,使用align-items: center一句话就能够轻松实现居中效果。

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒