CSS实现元素垂直居中
对元素的垂直居中针对于单行元素和多行元素将分情况讨论。
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。
HTML结构：
<div class="container"> Hello World!!!</div>
CSS样式：
<style> .container{ height:100px; line-height:100px; background:#999; }</style>对于父元素高度不确定的文本、图片等的块级元素的竖直居中可以设置相同的上下内边距（padding值）即可实现居中，这个数值不必过大。
多行文本，图片，块级元素皆属于这种情况，对此的垂直居中主要有两种方法。
立即学习“前端免费学习笔记（深入）”；
对要垂直居中的元素外插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
另需注意，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。
HTML结构：
<body> <table> <tbody> <tr> <td class="wrap"> <div> <p>Hello World!!!</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1100">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680092492385.png" alt="来画数字人直播">
</a>
<div class="aritcle_card_info">
<a href="/ai/1100">来画数字人直播</a>
<p>来画数字人自动化直播，无需请真人主播，即可实现24小时直播，无缝衔接各大直播平台。</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="来画数字人直播">
<span>0</span>
</div>
</div>
<a href="/ai/1100" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="来画数字人直播">
</a>
</div>
<p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div> </td> </tr> </tbody> </table></body>CSS样式：
table td{height:500px;background:#ccc}因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
HTML结构：
<div class="container"> <div> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> <p>Hello World!!!</p> </div></div>
CSS样式：
<style> .container{ height:300px; background:#ccc; display:table-cell; vertical-align:middle; }</style>这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
362
收藏
