在div中设置文字与内部div垂直居中

xiaozhumaopao 2021-12-19 原文

要实现如图一所示的结果：

html代码如下：

<!DOCTYPE html>
<html>

<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>商品管理后台首页</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="content">
        <span>这是一个测试要居中</span>
        <div class="box">我是div中的文字</div>
    </div>
</body>

</html>

相应的less代码

.content{
    width: 500px;
    height: 200px;
    border:1px solid red;
    position: relative;
    line-height: 200px;/*让class=content父div中的文字垂直居中*/
    span{
        background: green;
    }
    .box{
        background: yellow;
        float: left;
        width: 200px;
        height: 100px;
        line-height: 100px;/*让黄色div中的文字内容垂直居中*/
        text-align: center;/*让文字水平居中*/
        position: absolute;
        top:50%;
        margin-top: -50px;
        margin-left: 200px;    
    }
}

②使用vertical-align:middle设置在父元素中的位置，

效果图：

html代码：

<!DOCTYPE html>
<html>
<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <title>商品管理后台首页</title>
    <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
    <div class="content">
        我是div中的文字<div class="pox">我是子元素的文字</div>
    </div>
</body>

</html>

相应的css代码：

.content{
    width: 500px;
    height: 200px;
    line-height: 200px;/*设置其文字内容垂直居中*/
    border:1px solid red;
    .pox{
        background: yellow;
        width: 200px;
        height: 70px;
        display: inline-block; /*一定要将div设置为inline-block*/
        vertical-align: middle;/*设置该元素在父元素中的位置*/
        line-height: 70px;
        border: 1px solid green;
        text-align: center;
    }
}

化简后的核心代码：

.content{
    width: 500px;
    height: 200px;
    line-height: 200px;/*设置其文字内容垂直居中*/
    background:red;
    .pox{
        height: 70px;/*给内部div设置了高度，该div才会垂直居中*/
         display: inline-block; /*一定要将div设置为inline-block*/
        vertical-align: middle;/*设置该元素在父元素中的位置*/
        background: yellow;
    }
}