关于前端:让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