不定宽高的div如何垂直居中

话不多说，先上效果图

效果图

html布局

<div class="wap"><div class="center"></div></div>
复制代码

以下是css代码

第一种

采用绝对定位

            .wap{width: 300px;height: 300px;border: solid 1px red;position: relative;}.center{width: 100px;height: 100px;background: green;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
复制代码

第二种

flex布局

对进行布局的父容器的display进行设置

                .wap{width: 300px;height: 300px;border: solid 1px red;display: flex;justify-content: center;align-items: center;}.center{width: 100px;height: 100px;background: green;}
复制代码

第三种

表格布局

父元素设置为 display:table-cell;vertical-align:middle;text-align:center;子元素设置为:display:inline-bock;

        .wap{width: 300px;height: 300px;border: solid 1px red;display: table-cell;vertical-align:middle;}.center{width: 100px;height: 100px;background: green;display: inline-block;}
复制代码

第四种

栅格布局

给父元素设置 display：gird; justify-content:center; align-items:center;

                .wap{width: 300px;height: 300px;border: solid 1px red;display: grid;justify-content: center;align-content: center;}.center{width: 100px;height: 100px;background: green;}
复制代码

第五种

还是绝对定位只不过把transform:translate(-50%,-50%)变成margin-left：50%,margin-right:50%;