单行及多行文本垂直居中问题

最新推荐文章于 2021-10-17 22:09:02 发布

weixin_34241036

最新推荐文章于 2021-10-17 22:09:02 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b6a83a5e51d4517c564e66e

本文介绍了使用CSS实现单行及多行文本垂直居中的方法，包括通过line-height、display:table和vertical-align属性的组合应用，适用于不同场景的布局需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记下小本本，不然下次又忘了。。。

单行文本垂直居中一般line-height就ok了
多行文本垂直居中可设置父级元素display:table,然后要居中的这些元素设置display:table-cell;vertical-align: middle;
vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式 方法多又多，这次先记下这种吧(゜-゜)つロ

 <footer>
        <div class="blue_bg">联系我们 | 网站声明 | 广告合作</div>
        <div class="footer_bottom">
            <div class="cell"><p>鄂ICP备05011509号 水利部长江水利委员会主办 长江委宣传出版中心制作维护</p>
                <p>新闻线索：027-82927755 电话总机：027-82828114 投稿信箱：cjslw＠126.com</p>
            </div>
            
        </div>
    </footer>
复制代码

    footer{
    width:100%;
}
footer .blue_bg{
    height:40px;
    background-color: #304b5e;

    font-size: 1em;
    color:#fff;
    line-height: 40px;
    text-align: center;/*关键语句  水平居中*/
    cursor: pointer;
}
footer .footer_bottom{
    width:100%;
    height:100px;
    background-color: #f3f3f3;
    font-size:1em;
    display:table;/*关键语句*/
    
    text-align: center;
}
.cell{
    display: table-cell;/*关键语句*/
    vertical-align: middle;/*关键语句  垂直居中*/
}
复制代码