1. 實現DIV水平居中

設置DIV的寬高，使用margin設置邊距0 auto，CSS自動算出左右邊距，使得DIV居中。

1 div{
2     width: 100px;
3     height: 100px;
4     margin: 0 auto;
5 }

缺點：需要設置div的寬度

2. 實現DIV水平、垂直居中

要讓DIV水平和垂直居中，必需知道該DIV得寬度和高度，然後設置位置為絕對位置，距離頁面窗口左邊框和上邊框的距離設置為50%，這個50%就是指頁面窗口的寬度和高度的50%，最後將該DIV分別左移和上移，左移和上移的大小就是該DIV寬度和高度的一半。

1 div{
2     width: 100px;
3     height: 100px;
4     position: absolute;
5     left: 50%;
6     top: 50%;
7     margin: -50px 0 0 -50px;
8 }

缺點：需要設置position屬性，網頁復雜時容易擾亂頁面布局,而且只是元素的起始位置居中

3. 文本在DIV中水平、垂直居中（text-align + line-height）

1）text-align 屬性規定（塊級）元素內文本的水平對齊方式。

2）line-height = height，行高等於元素高度，用來實現垂直居中。

1 div{
2     width:200px;height:200px;  /*設置div的大小*/
3     border:1px solid green;    /*邊框*/
4     text-align: center;        /*文字水平居中對齊*/
5     line-height: 200px;        /*設置文字行距等於div的高度*/
6     overflow:hidden;
7 }

DIV居中的經典方法