垂直居中问题不只有 line-height 可以解决,还有一个哥们叫 margin-top

我们都知道,对于一行文本的垂直居中可以通过设置 height 与 line-height 值相等来实现。

那么对于两个嵌套的div ,或者一个div中的多行文本,怎么让被包含的部分实现垂直居中呢?显然,通过 line-height 没法实现。

其实,实现原理就是用外层div的高度减去内层 div 的高度,除以2之后,给内层div设置margin-top值就可以了。

假如页面上内层div的高度是由内容撑开的,这时就需要用js了。通过动态获取内层div的高度,再依照上述原理去实现。

posted @ 2017-07-12 14:15  Y_Y1208  阅读(388)  评论(0编辑  收藏  举报