居中問題總結

今天看到一道面試題，怎麼樣一個div水平垂直居中，當時想到的就是絕對定位+top和left，卻忘了再經過margin進行修正，因而拿出css權威指南，從新複習了下定位的知識，寫個總結：

一.水平居中

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        margin: 0 auto;
    }
</style>

<div id="box"></div>

auto:瀏覽器根據剩餘空間自動定位距離，當左右都設置爲auto的時候，保證左右剩餘空間相同，就變成了居中。要注意的是：只對左右設置有用，上下沒用，因此不能經過這種方式達到垂直居中目的。

二.水平垂直居中

方式1：

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        position: absolute;
        top:0;
        right: 0;
        bottom: 0;
        left: 0;
        margin:auto;
    }
</style>

<div id="box"></div>

首先position絕對定位，再把top right bottom left都巧妙設置成0，最後設置margin爲auto，瀏覽器就自動在div上下和左右都留下相等的間距，達到了水平和垂直都居中的目的。

方式2：

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        position: absolute;
        top:50%;
        left:50%;
        margin-top:-100px; /*高度的一半*/
        margin-left: -150px;/*寬度的一半*/
    }
</style>

<div id="box"></div>

top和left都是針對div左上角那個點定位的，因此都設置了50%，至關於把div左上角那個點定位到了瀏覽器正中間，再經過margin-top和margin-left修正位置。

方式3：

<style>
    #box{
        width: 300px;
        height: 200px;
        border: solid black;
        background-color: bisque;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }
</style>

<div id="box"></div>

原理與方式二相同，不一樣點在於利用css3裏面的transform屬性進行位置的修正

若是還有其餘經常使用的方式，歡迎在文章下面留言補充，謝謝