網頁佈局實現之div垂直居中

1.實現一個div上下左右居中的幾種方式。

實現div水平居中很容易，給div一個寬度值，然後左右margin值為auto就可以實現，比較難實現的是div的垂直居中。

（1）利用position絕對定位。

程式碼示例：

#div{width:300px;height:200px;position:absolute; top:50%;left:50%;margin-top:-150px;margin-left:-100px;}

#parent_div{position:reletive;}

解釋：設定top，left值，參考點是div左上角的點，所以設定top，left之後，還要考慮離正中心的偏移位置，此時可以用負的margin值來實現。

（2）flex 彈性佈局

程式碼示例：#parent_div{display:flex;}

#div{margin:auto;}

兩個屬性就可以實現了，程式碼簡潔了不少，實現的效果卻是一樣的。（看了一下，關於flex的知識點需要單獨列出來作為一篇文章。）