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 交流討論。 最後,再次感謝您閱讀完這一篇文章。

 

 

關於 姜智豪 老師

從事網頁設計工作和教學工作 20 多年,參與設計過許多網站開發專案。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 HTML、CSS、JavaScript、jQuery、RWD 等網頁設計技術,對於 SEO 搜尋引擎排名最佳化,以及 Instructional Design 教學專案設計亦有深入的研究。

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

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

迴響已被關閉。