CSS 要如何把 div 垂直及水平置中，放在畫面的正中央呢？

假設有一塊 div 長這樣

        #block {
            height: 200px; /*高度*/
            width: 400px;  /*寬度*/
            background-color: black;
        }

今天我們要把他放置在畫面的正中間
只要加上

            position: absolute;     /*絕對位置*/
            top: 50%;               /*從上面開始算，下推 50% (一半) 的位置*/
            left: 50%;              /*從左邊開始算，右推 50% (一半) 的位置*/

可是，加上以上的程式碼後
網頁會變成這樣子

雖然上面、左邊都推50%進來了，但是並不是我們想要的效果

這個時候，我們要再加上

            margin-top: -100px;     /*高度的一半*/
            margin-left: -200px;    /*寬度的一半*/

把整個 div 上、左各往回推一半，這樣子就是我們想要的置中效果了。

---

所有程式碼如下

        #block {
            height: 200px;
            width: 400px;
            background-color: black;

            position: absolute;     /*絕對位置*/
            top: 50%;               /*從上面開始算，下推 50% (一半) 的位置*/
            left: 50%;              /*從左邊開始算，右推 50% (一半) 的位置*/
            margin-top: -100px;     /*高度的一半*/
            margin-left: -200px;    /*寬度的一半*/

        }