在前端切圖的時候，可能經(jīng)常會遇到一個div盒子怎么在固定區(qū)域垂直居中的需求，下面我們來看一下css實現(xiàn)盒子居中的方法。

css設(shè)置盒子居中的方法：

第一種：

用css的position屬性

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

position: relative;

}

.div2 {

width: 40px;

height: 40px;

background-color: red;

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

第二種：

利用css3的新增屬性table-cell, vertical-align:middle;

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

display: table-cell;

vertical-align: middle;

}

.div2 {

width: 40px;

height: 40px;

background-color: red;

margin: auto;

}

第三種：

利用flexbox布局

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

display: flex;

/*!*flex-direction: column;*!可寫可不寫*/

justify-content: center;

align-items: center;

}

.div2 {

height: 40px;

width: 40px;

background-color: red;

}

第四種：

利用transform的屬性(缺點：需要支持Html5)

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

position: relative;

}

.div2 {

height: 40px;

width: 40px;

background-color: red;

position: absolute;

top: 50%;

left: 50%;

-ms-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

效果圖：

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的html盒子自动居中,css盒子怎么居中？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。