CSS让一个div在另一个div中水平、垂直居中

# 前端 / 102访问 / 0评论 / 2021-09-16
.parent {
    width: 235px;
    height: 150px;
    border: 1px solid red;
    /* 水平、垂直居中 */
    display:flex;
    justify-content:center;
    align-items:center;
}
.child {
    width: 135px;
    height: 75px;
    border: 1px solid blue;
}

 

示例:

<div class="parent">
    <div class="child">
    </div>
</div>

效果图:

如果最里层div有文字,且同样需要居中显示时,在child样式同样加上水平、垂直居中样式即可。比如

.child {
    width: 135px;
    height: 75px;
    border: 1px solid blue;
    display:flex;
    justify-content:center;
    align-items:center;
}

 

<div class="parent">
    <div class="child">
        <span>测试</span>
    </div>
</div>

 

效果图:

本文地址: https://www.kumaomao.cn/article/YJSMRVYKDN.html

原文地址: https://blog.csdn.net/qq_43428376/article/details/120289432