css 怎麼把div居中?第一種：通過 position translateY a：水平及垂直同時居中，我來為大家科普一下關于css 怎麼把div居中?下面希望有你要的答案，我們一起來看看吧!

css 怎麼把div居中

第一種：通過 position translateY

a：水平及垂直同時居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px; } .wrapper .content{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px; }

b：水平居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px; } .wrapper .content{ position: absolute; left: 50%; transform: translateX(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px; }

c：垂直居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px; } .wrapper .content{ position: absolute; top: 50%; transform: translateY(-50%); height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px; }

第二種：通過 position margin

a：水平及垂直同時居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px; } .wrapper .content{ position: absolute; top: 50%; margin-top: -50px; left: 50%; margin-left: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px; }

b：水平居中

1 .wrapper { 2 position: relative; 3 width: 300px; 4 height: 300px; 5 border: solid 2px red; 6 border-radius: 5px; 7 } 8 9 .wrapper .content{ 10 position: absolute; 11 left: 50%;12 margin-left: -50px; 13 height: 100px; 14 width: 100px; 15 border: solid 2px blue; 16 border-radius: 5px; 17 }

c：垂直居中

.wrapper { position: relative; width: 300px; height: 300px; border: solid 2px red; border-radius: 5px; } .wrapper .content{ position: absolute; top: 50%; margin-top: -50px; height: 100px; width: 100px; border: solid 2px blue; border-radius: 5px; }

第一種：元素内容沒有标簽，隻有内容，這樣垂直設置height和line-height一樣就可以了，水平設置text-align:center就可以

.wrapper{ height: 50px; line-height: 50px; text-align: center; }

第二種：元素内部元素居中，設置如下：

.wrapper-table{ display: table-cell; height: 100px; width: 100px; vertical-align: middle; text-align: center; border: solid 2px yellow; } .wrapper-table .wrapper-table-cell{ border: solid 2px #009900; }

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!