a3父元素和子元素宽高不固定，如何实现水平垂直居中

越来越好的月

已于 2023-03-09 21:09:34 修改

阅读量162

点赞数 1

分类专栏： html/css常遇的问题文章标签： css3 前端 css

于 2023-03-09 21:06:55 首次发布

本文链接：https://blog.youkuaiyun.com/yuyuyuyuyuyyuuyu/article/details/129429362

版权

html/css常遇的问题专栏收录该内容

2 篇文章

订阅专栏

文章介绍了在CSS中实现子元素在父元素不确定高度的情况下垂直居中的三种方法：1)使用弹性布局，通过`display:flex`和相关属性；2)父元素相对定位，子元素绝对定位并设置边距；3)子元素绝对定位结合位移`transform`。这三种方法都能确保子元素在任何尺寸的父元素中保持垂直居中。

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

在开发中，我们有时候会遇到父元素与子元素高度并不确定的情况，那么在这种不确定的情况下如何实现子元素垂直居中与父元素呢？

方法一：用弹性布局

给父元素开启弹性布局，利用弹性属性让子元素居中

<div class="v2">
            <div class="v1"></div>
        </div>
        <style>
            .v1{
                width: 100px;
                height: 100px;
                background-color: green;
            }
             .v2{
                width: 300px;
                height: 300px;
                background-color: red;
                display: flex;
                justify-content:center;
                align-items:center;
            }
        </style>

无论红色盒子和绿色盒子宽高如何变化，绿色盒子永远在红色盒子水平中央，垂直中央。

方法二：用定位

给父元素添加相对定位，子元素添加绝对定位，并将子元素定在离父元素上下左右位置相同的地方

  <div class="v2">
            <div class="v1"></div>
        </div>
        <style>
            .v1{
                width: 100px;
                height: 100px;
                background-color: green;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
            }
             .v2{
                width: 300px;
                height: 300px;
                background-color: red;
                position: relative;
            }
        </style>

无论红色盒子和绿色盒子宽高如何变化，绿色盒子永远在红色盒子水平中央，垂直中央。

方法三：用定位+位移

  <div class="v2">
            <div class="v1"></div>
        </div>
        <style>
            .v1{
                width: 100px;
                height: 100px;
                background-color: green;
                position: absolute;
                top: 50%;
                left: 50%;
                transform:translate(-50%,-50%) ;
            }
             .v2{
                width: 300px;
                height: 300px;
                background-color: red;
                position: relative;
            }
        </style>

无论红色盒子和绿色盒子宽高如何变化，绿色盒子永远在红色盒子水平中央，垂直中央。