内联元素在块级元素内部垂直水平居中

最新推荐文章于 2023-12-13 11:32:50 发布

侠之大者为国为民

最新推荐文章于 2023-12-13 11:32:50 发布

阅读量1.8k

点赞数

分类专栏： css 文章标签： html css

css 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<html>

<head>
    <style>
        *{margin:0;padding:0}
        .box {
            position: absolute;
            width:100%;
            height:100%;
            background-color:gray;
            text-align: center;
        }
        .middle{
            padding:3px;
            background-color: orange;
        }
        .box:after{
            display:inline-block;
            height:100%;
            content:'';
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box">
    <span class="middle">行内元素</span>
    </div>
</body>

</html>