在學(xué)習(xí)CSS布局的過(guò)程中經(jīng)常會(huì)碰到需要將元素垂直水平居中的情況,
通常的做法是通過(guò)設(shè)置一定的外邊距,或者通過(guò)定位和負(fù)外邊距來(lái)完成,
例如:
一,設(shè)置外邊距
<pre>
<style>
.box1{
width: 800px;
height: 800px;
}
.box2{
width: 400px;
height: 400px;
margin: 200px 0 0 200px;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</pre>
二,居中定位
<pre>
<style>
.box1{
width: 600px;
height: 600px;
postion: relative;
}
.box2{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
</pre>
但是如果需要居中的元素的寬和高無(wú)法預(yù)先知道,以上的兩種方法就無(wú)法使用了,
因此我們需要另辟蹊徑,
大致有以下三種方式可以酌情使用;
方法一: 彈性盒子,通過(guò)將父盒子的display屬性設(shè)置為flex,并將子盒子的margin設(shè)置為auto;這種方法的好處是代碼量少,而且使用彈性盒子布局較為便捷;缺點(diǎn)是需要支持CSS3;
<pre><style>
.div1{
width: 100%;
height: 100%;
display: flex;
}
.div2{
width: 300px;
height: 300px;
background: black;
margin: auto;
}
</style>
<body>
<div class="div1">
<span class="div2"></span>
</div>
</body>
</pre>
方法二:使用表格;在這里可以直接使用table標(biāo)簽,或者可以將父盒子轉(zhuǎn)換成表格單元格,需要居中的元素轉(zhuǎn)換為行內(nèi)塊元素,單元格內(nèi)可以通過(guò)vertical-align屬性和text-align屬性將元素垂直水平居中.(或者也可以不將元素轉(zhuǎn)換成行內(nèi)塊元素,直接將元素的外邊距設(shè)置為(0,auto)來(lái)水平居中).
這種方式的優(yōu)點(diǎn)是兼容性強(qiáng),但是需要添加較多的層級(jí),使結(jié)構(gòu)變得復(fù)雜;
<pre>
<style>
.div1{
height: 100%;
width: 100%;
position: absolute;
text-align: center;
display: table;
}
.div2{
display: table-cell;
vertical-align: middle;
}
.div3{
display: inline-block;
width: 100px;
height: 100px;
background: rgb(233,233,233);
}
</style>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
</div>
</div>
</div>
