html盒子自动居中,css盒子怎么居中？
在前端切圖的時候，可能經常會遇到一個div盒子怎么在固定區域垂直居中的需求，下面我們來看一下css實現盒子居中的方法。
css設置盒子居中的方法：
第一種：
用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%);
}
效果圖：
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的html盒子自动居中,css盒子怎么居中？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 的向上取整函数_计算机二级Excel常用
- 下一篇： android 圆角边框边框渐变,支持边