CSS 教學 – 設定一個 div 水平置中和垂直置中

使用 CSS 語法要設定一個 div 水平置中,是很常見到的需求,最多人使用 margin: 0 auto; 這個方法就可以達成。但是,如果要讓一個 div 同時間做到在網頁上水平置中還要垂直置中,也就是 CSS 上下左右置中這就有點麻煩了,不太容易喔!

CSS 語法的排版招式百百款,如果同學上網搜尋「CSS 垂直置中」或都是「CSS 高度置中」這個字,可能就會找到一大堆各種不同的方法,有的招式用起來很複雜,有的看起來不易理解…. 以下,我們就來介紹一個比較簡單的做法,在網頁置放一個 div ,再使用 CSS 語法的 position:absolute; 座標定位方法,也可以做到 CSS 全部的寬度水平置中、高度垂直置中的效果,實現了 CSS 上下左右置中的需求。

 

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-07-2

 

 


步驟一:

在網頁上寫一個 div 命名為 BOX ,順便在 div 裡面放一張圖片,網頁的 HTML 語法如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-01

 

先使用瀏覽器看看現在的網頁,一開始的樣子如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-02

 


步驟二:

開使用 CSS 語法來編排 div 的位置,如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-03

第 11 行:對 div 使用 position:absolute; 座標設定

第 12 行:設定 div 的 left 座標為 50%

第 13 行:設定 div 的 top 座標為 50%

 

再使用瀏覽器看一下網頁目前的情況,看起來似乎好像歪歪的,還沒有被置中,如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-04

 

我們所設定的座標位置是 left:50%; 和 top:50%; 剛剛好就會是瀏覽器內容區中心點的位置,因為 CSS 的 position:absolute; 是以 div 的左上角當作座標的計算點,所以才會產生這樣的結果,如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-04-2

 


步驟三:

接下來,我們只要在 div 上再加一點點語法,如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-05

第 15 行: 我們 div 的寬度是 300px; 使用 margin-left:-150px; 可以讓 div 往右方向位移 150px;

第 16 行: 我們 div 的高度是 300px; 使用 margin-top:-150px; 可以讓 div 往上方向位移 150px;

 

存檔後,再使用瀏覽器看一下網頁目前的情況,如下圖:

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-07

喔喔喔!成功了 CSS 寬度水平置中、高度垂直置中,此時,我們可以隨意拉動調整瀏覽器的視窗大小,都可以看到 div 一直都是在畫面的中間!。

 

CSS 語法 - 網頁設計  - CSS 教學 - 設定一個 div 水平置中和垂直置中 - FLY-07-21

 

CSS 語法的排版招式百百款,這只是其中 CSS 上下左右置中的一個小招式,如果您對於這個範例有其他的問題或想法,歡迎直接到老師的 Facebook 交流討論,也可以直接到我們飛肯設計的 Facebook 交流討論。 最後,再次感謝您閱讀完這一篇文章。

 

 

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in CSS 語法 - 網頁設計 and tagged , , .

迴響已被關閉。