网页css自适应高度下垂直居中文字

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/mylovewanzi/article/details/81346782

网页css自适应高度下垂直居中文字

---

1、关于css自适应高度（不知道具体的高度）下垂直居中文字：
分析：使用vertical-align方法可以使元素垂直居中，但是只是针对支持vertical的元素，如table 、td 等块级元素（只要是会计元素就行），div和span是不支持的，但我们可以同过display将这些不是块级元素的设置成块级元素。

display: inline-block;

2、实现方法：
我们知道块级元素可以使用vertical-align: middle来垂直居中，那在自适应下我们是否可以通过该方法来实现文字的垂直居中呢，答案是否定的。

要想达到居中的效果还需要span标签的小小帮助。

下面例子：
(html部分代码）

<!--网站导航-->
<div id="nav">
    <ul>
        <li><a href="">首页</a><span></span></li>
        <li><a href="">热门</a><span></span></li>
        <li><a href="">最新</a<span></span></li>
        <li><a href="">关于作者</a><span></span></li>
    </ul>
</div>

(css部分代码)

/*导航栏样式*/
#nav{
    width: 100%;
    height: 5%;
    background-color: blue;
}

#nav ul li{
    margin-left: 15%;
    display: inline;
}
#nav ul li a{
    display: inline-block;
    color: red;
    background-color: black;
    width: 10%;
    height: 5%;
}
#nav ul li span {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle; 
}

运行结果表明，使用空的sapn标签可以达到a标签的垂直居中。这种方法同样适用于img标签p标签等。
（注意：需要居中的元素本身也要设置垂直居中display: inline-block;）

3.另一种方法：
父容器：display:table
子容器：display:table-cell。
再使用vertical-align: middle;将自容器垂直居中。

这种方法同样可以使得文字垂直居中，缺点是灵活性低，个人觉得没有第一种方法好。而且在上面例子也达到不了垂直居中效果。所以还是推荐第一种方法。

---

-END-