div盒子水平居中的4种方法

最新推荐文章于 2022-07-26 16:55:55 发布

viceen

最新推荐文章于 2022-07-26 16:55:55 发布

阅读量9.5k

点赞数 5

文章标签： html css css3 flex

本文链接：https://blog.csdn.net/weixin_44867717/article/details/109670871

版权

div盒子水平居中的4种方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="parent" style="background-color: aqua;width:800px;height:500px">
        <div class="child" style="background-color: red;width:300px;height:300px"></div>
    </div>
    <style>
        /* 1 flex布局 */
        div.parent {
            display: flex;
            /*项目位于容器的中心*/
            justify-content: center;
            /*元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。*/
            align-items: center;
        }

        /* 2 相对定位*/
         /*translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。
    当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置。
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。*/
        /* div.parent {
            position: relative;

        }

        div.child {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        } */

        /* 3 */
        /* grid布局即网格布局，每个网格都有起止线，每两条线之间都有设定好的距离*/
        /* div.parent {
            display: grid;
        }

        div.child {
        /将 网格项中的内容沿着 行轴线（水平方向） 对齐网格区域 的水平中间位置, 此值适用于单个网格项内的内容/
            justify-self: center;
         /元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。/
            align-self: center;
        } */

        /* 4 伪元素*/
        /* div.parent {
            font-size: 0;
            text-align: center;


        }

        div.parent:before {
            content: "";
            display: inline-block;
            width: 0;
            height: 100%;
            vertical-align: middle;
        }

        div.child {
            display: inline-block;
            /把此元素放置在父元素的中部。/
            vertical-align: middle;
        } */
    </style>
</body>

</html>