如何实现一个不定宽高的 div 水平且垂直居中

weixin_45723025

于 2022-06-13 11:43:02 发布

阅读量92

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45723025/article/details/125257165

版权

本文介绍了三种常见的网页元素居中布局技术：1.使用CSS transform的translate属性；2.利用flexbox布局；3.通过设置margin为auto。这三种方法分别适用于不同的场景，帮助开发者实现灵活的页面布局。

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

1.定位+transform: translate(-50%, -50%)

<style>
        .box1{
            width: 500px;
            height: 450px;
            background-color: pink;
            position: relative;
            
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    <div class="box1">
        <div class="box2">

        </div>
    </div>

2.flex 弹性布局居中

给父盒子设置 display:flex; justify-content:center; align-items:center;

<style>
        .box1{
            width: 500px;
            height: 450px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>
    <div class="box1">
        <div class="box2">

        </div>
    </div>

3.margin: auto;

<style>
        .box1{
            width: 500px;
            height: 450px;
            background-color: pink;
            position: relative;
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: blue;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
    <div class="box1">
        <div class="box2">

        </div>
    </div>