让一个子盒子在父盒子中水平垂直居中的方法

最新推荐文章于 2023-09-11 08:21:22 发布

原创最新推荐文章于 2023-09-11 08:21:22 发布 · 1.6k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了五种方法使子元素在父元素中实现水平垂直居中：1) 利用定位（子绝父相）；2) 先定位再利用transform平移；3) 先定位再用margin:auto；4) 利用flex布局；5) 利用display:table-cell。每种方法都提供了具体的CSS样式实现细节。

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

1.利用定位(子绝父相)

    <style>
        .parent {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            position: relative;
        }

        .child {
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>

    <div class="parent">
        <div class="child">我是子元素</div>
    </div>

通过子绝父相left:50% top:50%让子盒子定到接近父盒子中心的位置,再通过上外边距和左外边距负的子盒子自身宽高一半的距离就可以让子盒子在父盒子中水平垂直居中(这里要注意,定位用了left和top后外边距只能使用left和top 用right和bottom无效)

2.先定位再利用transform

    <style>
        .parent {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            position: relative;
        }

        .child {
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

    <div class="parent">
        <div class="child">我是子元素</div>
    </div>

第二种方法一开始定位跟第一种方法一样,不同的地方在于用平移transform(-50%,-50%),让子盒子向左和向上平移自身宽和高的一半(这种方法与第一种方法大体上相似,不同点也是优点在于不需要去计算子盒子宽高的一半,两个50%就是指子盒子宽高的一半)

3.先定位再利用margin:auto;

    <style>
        .parent {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            position: relative;
        }

        .child {
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>

    <div class="parent">
        <div class="child">我是子元素</div>
    </div>

这种方法也是先子绝父相定位,再给子盒子上下左右全为0,再使用margin:auto;就可以让子盒子在父盒子中水平垂直居中

4.利用flex布局

   <style>
       .parent {
           width: 500px;
           height: 500px;
           border: 1px solid #000;
           display: flex;
           justify-content: center;
           align-items: center;
       }

       .child {
           width: 100px;
           height: 100px;
           border: 1px solid #999;
       }
   </style>

   <div class="parent">
       <div class="child">我是子元素</div>
   </div>

让父盒子变成flex弹性盒子,再给父盒子加样式 justify-content: center;(水平居中) align-items: center;(垂直居中),就可以实现子盒子水平垂直居中

5.利用display:table-cell

    <style>
        .parent {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        .child {
            width: 100px;
            height: 100px;
            border: 1px solid #999;
            display: inline-block;
        }
    </style>

    <div class="parent">
        <div class="child">我是子元素</div>
    </div>