详解元素的垂直居中

最新推荐文章于 2024-06-03 18:53:48 发布

kenny.feng

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量387

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/fenganhai/article/details/105719953

版权

前言：这是本人的笔记，花了点时间整理出来，希望可以帮助一些朋友少走弯路，可能有些不足之处，欢迎评论区留言，请多指正（如果您觉得有所帮助，点赞支持哦）

元素的垂直居中分两种情况：父元素高度确定的单行文本、父元素高度确定的多行文本

一、父元素高度确定的单行文本

方法：

设置父元素的height和line-height高度一致

<style type="text/css">
.parent{ /* 父div */
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

<div class="parent">
    <h2>Hello World</h2>
</div>

效果：

补充：

1.font-size：字体大小。即：该行的“上基线”和该行的“下基线”之间的距离（也可以说：上一行的“下基线”和下一行的“上基线”之间的距离）

2.line-height：行高。即：font-size+行距=line-height

3.行距：字体的上下空白部分之和。即：上半行距+下半行距=行距

4.基线：文本的上边界和下边界，而不是该行的最顶部和最顶部的线（除非行距为0）

正常情况：

下面各实例都要先清除浏览器默认的间隙，以免影响结果的观察：

*{
    margin: 0;
    padding: 0;
}

（1）当font-size=line-height时，行距=0（即无任何上下空白）则每行紧贴着：

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    p{
        font-size: 32px;
        line-height: 32px;
    }
</style>

<p>这是第一行文本</p>
<p>这是第二行文本</p>

效果：

（2）当font-size<line-height时，行距>0（即上下空白相等），则为正常情况：

（3）当font-size>line-height时，行距<0（即不仅无上下空白，而且会重合）：

二、父元素高度确定的多行文本

父元素高度确定的多行文本、图片等的竖直居中的方法有两种

方法一：

使用插入table (包括tbody、tr、td)标签，同时设置 vertical-align：middle（因为td 标签默认情况下就默认设置了 vertical-align 为 middle，所以可省）

html代码：

<!-- 多行文本的垂直居中 -->
<table><tbody><tr><td>
    <div id="parent">
        <p>这是第一行文本</p>
        <p>这是第二行文本</p>
        <p>这是第三行文本</p>
    </div>
</td></tr></tbody></table>

<!-- 图片的垂直居中 -->
<table><tbody><tr><td>
    <div id="parent">
        <img src="images/kenny_feng.jpg">
    </div>
</td></tr></tbody></table>

css代码（可省）：

td{    
    height: 300px;
    background:#ccc;  /* 添加此属性只是为了便于观察结果 */
}

方法二：

step1：设置 display 为:table-cell

step2：设置vertical-align:middle

总结：这种方法的好处是不用添加多余的无意义的标签，但此方法兼容性比较差，在 chrome、firefox 及 IE8 以上的浏览器下可以，而在E6、7 并不支持这个样式, 兼容性比较差。而且这样将display:block变成了display:table-cell，破坏了原有的块状元素的性质，使块级元素变成行级元素

table-cell

此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

html代码：

<!-- 多行文本的垂直居中 -->
<div id="box1">     <!-- 将变成行级元素 -->
    <p>这是第一行文本</p>
    <p>这是第二行文本</p>
    <p>这是第三行文本</p>
</div>

<!-- 图片的垂直居中 -->
<div id="box2">     <!-- 将变成行级元素 -->
    <img src="images/kenny_feng.jpg">
</div>

css代码：

#box1{
    height: 300px;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
    background:#ccc;   /* 添加此属性只是为了便于观察结果 */
}

#box2{
    height: 500px;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
    background:lightpink;   /* 添加此属性只是为了便于观察结果 */
}

效果：