如何使一个盒子水平垂直居中（常用的）

时间：2024-07-09 16:24:15

目录

1. 使用Flex布局

 2. 使用Grid布局

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

 4.绝对定位+外边距 auto 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

1. 使用Flex布局

如何实现：

在父元素上添加：

            display: flex;

            align-items: center;

            justify-content: center;

<style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: flex;
            /* 水平居中 */
            justify-content: center; 
            /* 垂直居中 */
            align-items: center;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
 </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 2. 使用Grid布局

 如何实现：

在父元素上添加：

        display: grid;

        place-items: center;

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            display: grid;
            /* 水平和垂直方向都居中对齐 */
            place-items: center;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。

如何实现：

在父元素上添加：

         position: relative;

在子元素上添加：

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -100px;  //子元素高度的一半

            margin-left: -100px;  //子元素宽度的一半

 

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;//子元素高度的一半
            margin-left: -100px;//子元素宽度的一半
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 4.绝对定位+外边距 auto 

将盒子的上下左右定位全部设置为0，同时设置外边距自适应

如何实现：

在父元素上添加：

         position: relative;

在子元素上添加：

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小

如何实现：

在父元素上添加：

         position: relative;

在子元素上添加：

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

   <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: aqua;
        }

        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
<body>
    <div class="parent">
        <div class="child">我要水平垂直居中</div>
    </div>
</body>

 

 

相关文章