DIV居中的經典方法

1. 實現DIV水平居中

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

div{
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

    缺點：需要設置div的寬度

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

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

div{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

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

 

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

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

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

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