关于前端:让div垂直水平居中的方法

一、上下左右都为 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