高度百分比文字如何垂直居中

最新推荐文章于 2024-02-10 16:29:38 发布

weixin_33912246

最新推荐文章于 2024-02-10 16:29:38 发布

阅读量967

点赞数 1

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

版权

一.常用方式

让文字水平垂直居中通常使用的方法是:text-align: center(水平居中);line-height: 20px(垂直居中);值得注意的是line-height的值必须是固定值，即该元素的高度必须固定。

二.引出问题

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
            *{
                width: 100%;
                height: 100%;
            }
            .box{
                width: 40%;
                height: 30%;
                font-size: 24px;
                background: red;
                text-align: center;
                line-height: 100%;        （注意）
            }
    </style>
    <body>
        <div class="box">
            快让我水平垂直居中！！！
        </div>
    </body>
    </html>
复制代码

效果图：

设置line-height是没用的。

三.决解方案

利用弹性布局
利用display:table-cell

display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。因为单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，我们可以利用单元格的特性来实现功能。多行文本居中同样适用。

转载于:https://juejin.im/post/5c74e220f265da2de6611377

weixin_33912246

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高度百分比文字如何垂直居中

一.常用方式让文字水平垂直居中通常使用的方法是:text-align: center(水平居中);line-height: 20px(垂直居中);值得注意的是line-height的值必须是固定值，即该元素的高度必须固定。二.引出问题 <!DOCTYPE html> <html lang="en"> <head> &l...
复制链接

扫一扫