Benyi Hsia

我是Benyi,這裡存放關於資訊科技的文章

Posts match “ center ” tag:

CSS 如何把 div 垂直水平置中 (畫面正中央)

| Comments

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;    /*寬度的一半*/

        }