話不多說，先上效果圖

效果圖

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%;

總結

以上是生活随笔為你收集整理的不定宽高的div如何垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。