這一章我們來學(xué)習(xí)未知寬高實現(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ù)點的解釋：

1、利用父元素設(shè)置相對定位,子元素設(shè)置絕對定位,那么子元素就是相對于父元素定位的特性。

2、子元素設(shè)置上和左偏移的值都為50%。

3、然后再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果。