likes
comments
collection
share

让div垂直水平居中的方法

作者站长头像
站长
· 阅读数 37

一、上下左右都为0，然后margin:auto

例：css部分

div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

二、left和top都为50%，向、左上平移自身的50%

例：css部分

div{
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 50%;
        top: 50%;
        /*margin: -50px 0 0 -50px;*/
       （注意：这里可以使用平移transform: translate(-50%, -50%);可以省去计算的麻烦）
        }

三、使用弹性盒

            display: flex;
            justify-content: center;
            align-items: center;

四、使用网格布局

            display: grid;
            grid-template-rows: 100px 100px 100px;
            grid-template-columns: 100px 100px 100px;
            grid-template-areas: ". . ." ". div ." ". . .";

五、将小div转成行内块

在小div后，新增span标签，给小盒子设置vertical-align:middle。给大盒子设置line-height为大盒子高度，text-align:center