使用 CSS 語法要設定一個 div 水平置中，是很常見到的需求，最多人使用 margin: 0 auto; 這個方法就可以達成。但是，如果要讓一個 div 同時間做到在網頁上水平置中還要垂直置中，也就是 CSS 上下左右置中這就有點麻煩了，不太容易喔！
CSS 語法的排版招式百百款，如果同學上網搜尋「CSS 垂直置中」或都是「CSS 高度置中」這個字，可能就會找到一大堆各種不同的方法，有的招式用起來很複雜，有的看起來不易理解…. 以下，我們就來介紹一個比較簡單的做法，在網頁置放一個 div ，再使用 CSS 語法的 position:absolute; 座標定位方法，也可以做到 CSS 全部的寬度水平置中、高度垂直置中的效果，實現了 CSS 上下左右置中的需求。
步驟一：
在網頁上寫一個 div 命名為 BOX ，順便在 div 裡面放一張圖片，網頁的 HTML 語法如下圖：
先使用瀏覽器看看現在的網頁，一開始的樣子如下圖：
步驟二：
開使用 CSS 語法來編排 div 的位置，如下圖：
第 11 行：對 div 使用 position:absolute; 座標設定
第 12 行：設定 div 的 left 座標為 50%
第 13 行：設定 div 的 top 座標為 50%
再使用瀏覽器看一下網頁目前的情況，看起來似乎好像歪歪的，還沒有被置中，如下圖：
我們所設定的座標位置是 left:50%; 和 top:50%; 剛剛好就會是瀏覽器內容區中心點的位置，因為 CSS 的 position:absolute; 是以 div 的左上角當作座標的計算點，所以才會產生這樣的結果，如下圖：
步驟三：
接下來，我們只要在 div 上再加一點點語法，如下圖：
第 15 行： 我們 div 的寬度是 300px; 使用 margin-left:-150px; 可以讓 div 往右方向位移 150px;
第 16 行： 我們 div 的高度是 300px; 使用 margin-top:-150px; 可以讓 div 往上方向位移 150px;
存檔後，再使用瀏覽器看一下網頁目前的情況，如下圖：
喔喔喔！成功了 CSS 寬度水平置中、高度垂直置中，此時，我們可以隨意拉動調整瀏覽器的視窗大小，都可以看到 div 一直都是在畫面的中間！。
CSS 語法的排版招式百百款，這只是其中 CSS 上下左右置中的一個小招式，如果您對於這個範例有其他的問題或想法，歡迎直接到老師的 Facebook 交流討論，也可以直接到我們飛肯設計的 Facebook 交流討論。 最後，再次感謝您閱讀完這一篇文章。
當您對本文有任何問題或指教，歡迎到我們的【網頁設計交流討論區】一起交流討論喔！
