這一章我們來(lái)學(xué)習(xí)未知寬高實(shí)現(xiàn)盒子水平垂直居中，通常使用定位以及translate完成。參考下面例子：
<div class="box">
<div class="box1">
慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)慕課網(wǎng)
</div>
</div>
添加樣式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果如下：
技術(shù)點(diǎn)的解釋?zhuān)?/strong>
1、利用父元素設(shè)置相對(duì)定位,子元素設(shè)置絕對(duì)定位,那么子元素就是相對(duì)于父元素定位的特性。
2、子元素設(shè)置上和左偏移的值都為50%。
3、然后再用css3屬性translate位移,給上和左都位移-50%距離，就能達(dá)到垂直水平居中的效果。
掌握未知寬高實(shí)現(xiàn)盒子水平垂直居中的用法，可以使用右側(cè)編輯器中的代碼進(jìn)行測(cè)試。
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)