DIV CSS 佈局教程網

　　定位和居中問題是CSS中經常遇到的。對於一個定長定高的元素，實現其在父元素中的垂直水平居中，可通過position屬性實現。當元素大小可變時，這種方法就失效了，我們可以通過flex和table實現居中，這兩種方法今後會細致研究，這裡只使用position方法。

　　任務需要完成的效果圖如下：

　　相應代碼如下：

 .main{
     position: absolute;
     top: 50%;
     left: 50%;
     width: 400px;
     height: 200px;
     margin: -100px 0 0 -200px;
     background-color: #ccc;
 }
 .corner{
     position: absolute;
     width: 50px;
     height: 50px;
     background-color: #fc0;
 }
 .top-left{
     top: 0;
     left: 0;
     border-radius: 0 0 50px 0;
 }
 .bottom-right{
     bottom: 0;
     right: 0;
     border-radius: 50px 0 0 0;
 }

　　對應的html代碼為：

 <div class="container">
         <div class="main">
             <div class="top-left corner"></div>
             <div class="bottom-right corner"></div>
         </div>
 </div>

　　為實現灰色長方形的居中，我們將其position屬性設置為absolute，在最開始，我使用的是relative，發現top:50%失效，這是因為50%是相對其父元素高度來說的，而其父元素高度為零。於是我將body和父元素高度設置為100%，依然沒有效果（這個疑問還沒有解決）。改為absolute後，灰色長方形的偏移是相對頁面來說的，實現了垂直居中。

　　最後的兩個黃色圓角，道理相似，設置完absolute後，進一步為其設置top，bottom，right，left屬性即可。