CSS方式实现一个不知道宽高的 div 居中都有哪几种方法？

编程之魅

于 2024-03-12 11:15:00 发布

阅读量346

点赞数 10

分类专栏：前端入门到进阶文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_34738754/article/details/136638601

版权

前端入门到进阶专栏收录该内容

26 篇文章 0 订阅

订阅专栏

本文介绍了四种不同的CSS布局方法：使用flex布局创建自适应容器，Position+transform实现精确定位，position+margins实现居中对齐，以及Grid布局用于网格布局。这些技术在创建响应式设计时各有优势。

摘要由CSDN通过智能技术生成

方式一：flex 布局

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item {
        background: red;
    }
</style>
<div class="box">
    <div class="item">
        <h1 >宽高不定</h1>
    </div>
</div>

方式二： Position + transform

<style>
    .box {
        width: 200px;
        height: 200px;
        border: 1px solid blue;
        position: relative;
    }

    .item {
        background: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>
<div class="box">
    <div class="item">
        <h1>宽高不定</h1>
    </div>
</div>

方式三：position + margin

<style>
.box {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    position: relative;
}

.item {
    width: 50%;
    height: 50%;
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
</style>
<div class="box">
    <div class="item">
        <h1>宽高不定</h1>
    </div>
</div>