CSS水平垂直居中的7种基本方式

120 阅读3分钟

温故而知新,温故而知新,这篇文章来总结一下css中让元素水平垂直居中的7种基本方式,分为知道宽高的情况下的居中方式,和不知道宽高的情况下的居中方式

下面是html的结构,放在这里,下面就不重复放置了

<body>
    <div class="father sizeOfFather">
        <div class="son sizeOfSon">lazy dog</div>
    </div>
</body>

这里用sizeOfFather和sizeOfSon设置父元素和子元素的宽高,下面是他们的css样式

<style>
        .sizeOfFather{
            width: 600px;
            height: 600px;
            background-color: #eee;
        }
        .sizeOfSon{
            width: 100px;
            height: 100px;
            background-color: #ae8;
        }
    </style>

不需要知道元素宽高

flex

flex布局让元素水平垂直居中应该是最常用,并且最简单粗暴的方式了吧。只需给父元素一个flex布局,并且设置主轴侧轴都居中即可

        .father{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .son{
        }

效果图如下,下边效果相同就不再放图片了

image.png

grid

grid网格布局同样可以实现元素的水平垂直居中,同样的简单粗暴,只需要三行代码。 justify-self和align-self设置单个元素自身在父容器中的对齐位置。

        .father{
            display: grid;
        }
        .son{
            justify-self: center;
            align-self: center;
        }

absolute + transform

使用子绝父相给盒子设置定位,让子元素在父元素的定位为上50%、左50%,当然这样设置之后元素整体不在父元素的正中位置,这时就需要让子元素向上和向左再回移自身宽高的50%

        .father{
            position: relative;
        }
        .son{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

当然如果知道子元素的宽高的话,这里translate的50%也可以直接写宽高的一半

        .father{
            position: relative;
        }
        .son{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50px, -50px);
        }

absolute + top/right/bottom/left: 0 + margin: auto

使用定位让元素水平垂直居中还可以配合margin: auto来实现,这时我们就需要让子元素在top/right/bottom/left四个方向的定位都为0,这样设置在使用margin: auto时才可以在四个方向上都居中

        .father{
            position: relative;
        }
        .son{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

table-cell

把子元素转换为行内元素,给父元素设置文本居中(text-align: center)和对齐方式居中(vertical-align: middle)即可让子元素水平垂直居中

        .father{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .son{
            display: inline-block;
        }

需要知道元素宽高

absolute + 负margin

绝对定位的50%并不能让子元素完全居中,在不知道宽高的时候我们可以用transform: translate(-50%, -50%)来实现居中,在知道宽高的情况下我们还可以使用负margin的方法,把子元素往回移动自身宽高的一半

        .father{
            position: relative;
        }
        .son{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }

当然不止可以设置左边和上边的,右边和下边的同样可以

        .father{
            position: relative;
        }
        .son{
            position: absolute;
            right: 50%;
            bottom: 50%;
            margin-right: -50px;
            margin-bottom: -50px;
        }

absolute + calc

calc()方法可以在声明CSS属性值时执行一些计算,我们在写定位的距离时使用calc()方法就可以直接实现水平垂直居中

但是要注意,在calc()方法里,在+和-运算符左右一定要写空格,不这样的话不能正确解析表达式

        .father{
            position: relative;
        }
        .son{
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }

总结

目前就写这么多吧,希望自己要常常来回顾,温故而知新