块级元素水平垂直剧中的三种方法

最新推荐文章于 2025-05-28 17:51:49 发布

浅若如初

最新推荐文章于 2025-05-28 17:51:49 发布

阅读量128

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/qq_40794602/article/details/125560771

版权

本文介绍三种实现块级元素垂直水平居中的方法：使用flex布局、结合定位与margin属性以及利用定位配合transform属性。这三种方法适用于不同场景，为网页布局提供了灵活的选择。

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

直奔主题在这里提供三种块级元素垂直水平居中的方法

flex（子级宽高可固定也可不固定，随意）
定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值）
定位+transform（不固定子级的宽高）

第一种：flex

【html代码】
<div class="parent">
    <div class="child"></div>
</div>

【css代码】
.parent{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    border: 1px solid gainsboro;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child{
    width: 200px;
    height: 200px;
    background: red;
}

第二种：定位加margin

【html代码】
<div class="parent">
    <div class="child"></div>
</div>

【css代码】
.parent{
        position: relative;
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid gainsboro;
    }
.child{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -100px;
        background: red;
    }

第三种：定位+transform

【html】
<div class="parent">
    <div class="child">
        <span>我是子元素</span>
    </div>
</div>

【css代码】
.parent{
        position: relative;
        width: 500px;
        height: 500px;
        margin: 0 auto;
        border: 1px solid gainsboro;
    }
    .child{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: red;
    }