用css 讓區塊水平垂直置中 - MUKI space

可以看到除了DIV 之外，文字也是垂直水平置中。

另外當你移動畫面時，他也會固定在 ... 進而讓垂直置中有用。

▽ HTML 必須要有一組二層的巢狀結構：. HTML/CSS 2014.06.24 用css讓區塊水平垂直置中 文章索引 DIV垂直水平置中文字垂直水平置中(更新)使用flex水平垂直置中延伸閱讀 css語法技巧教學 有時候我們需要做個前導頁或是簡單的名片形象頁，在內容不多的情況下，可能需要讓DIV垂直以及水平置中；除了DIV外，甚至連文字也需要垂直與水平置中。

就如同下圖範例，這是一個很簡單的名片形象頁，深灰色底是一個DIV。

可以看到除了DIV之外，文字也是垂直水平置中。

另外當你移動畫面時，他也會固定在畫面中央，不會因為視窗縮放而有任何跑版情況。

（線上DEMO網址：http://codepen.io/mukiwu/full/Iuncz/） 看起來很難的效果，其實只要短短幾行語法就能達成。

就讓我們一步一步的拆解吧🙂 DIV垂直水平置中 先跟大家分享一張非常清楚的圖解，取自SmashingMagazine的大作。

（圖片來源：smashingmagazine） 如圖所示，不管該元素(div)多大，我們都可以先用position:absolute讓元素放在中央。

position:absolute; top:50%; left:50%; 但事情可沒那麼簡單，利用absolute調整位子的基準，是從該元素的「左上角」開始算起。

所以如果在X以及Y軸各設50%，是針對元素左上角（紅色點）的50%。

▼因此該元素(DIV)位子會掉到淺灰色區塊的地方，但是紅點剛好在畫面正中央。

我們必須要再給予元素明確的高與寬，利用margin-top以及margin-left把元素往回推。

往回推的數值就是(高/2）以及(寬/2）。

如果高是300px，就往回推150px，依此類推。

▼最後垂直置中的程式碼會如下所示： div{ width:600px; height:300px; position:absolute; top:50%; left:50%; margin:-150px00-300px; } 文字垂直水平置中 想讓文字水平置中，只要寫text-align:center就可以囉！算是置中規則裡最簡單的一種。

而垂直置中卻沒那麼直覺，單純寫上vertical-align:middle，瀏覽器是不會鳥你的。

垂直置中有很多種解法，今天跟大家分享其中一種，透過display改變元素的形態，進而讓垂直置中有用。

▼HTML必須要有一組二層的巢狀結構：

文字垂直置中

▼利用CSS修改display： section{ display:table; } .center{ display:table-cell; vertical-align:middle; } 使用這種方法就可以讓文字垂直置中囉~。

延伸閱讀：IntheWoods有提供更多種垂直置中的解法，好處與壞處也寫得很詳細，可以參考看看。

最後你也可以將兩種垂直置中的效果合併在一起，完整的程式碼請參考我的DEMO：http://codepen.io/mukiwu/full/Iuncz/ (更新)使用flex水平垂直置中 提到水平垂直置中，大家現在的心頭好絕對是display:flex啊！寫法上也變得簡單許多，讓我們來看看如何把上面的資料改用flex重寫吧。

▼先把樣式建好，在沒有調整位置前，預設會在畫面左上角。

▼HTML結構簡化如下：

上方的紅底區塊

頭像+文字介紹 ▼來加上display:flex吧 .main{ display:flex; justify-content:center; align-items:center; height:100vh; } justify-content:center;：讓.main區塊水平置中align-items:center;：讓.main區塊垂直置中height:100vh;：把.main的高度設為與瀏覽器視窗同高，如果沒設定這一行，垂直置中不會有作用。

▼簡單四行就可以完成水平垂直置中 ▼我們也可以用display:flex完成.data-wrap的排版

MukiWu

Front-endDesigner(Taipei,Taiwan)

descriptionorsomesocialicons....

.data-wrap{ display:flex; } .data-content{ margin-left:1.5rem; } 在.data-wrap設定display:flex，就能實現左右排版，輕鬆省下使用float後還要清除浮動…等問題。

延伸閱讀 有興趣想更了解flex或是vertical-align等對齊效果的朋友，歡迎參考我的其他文章： CSSFlexbox介紹與解析 InHTML/CSS Bymukiwu 老實說我到現在都還沒開始用flex做網站，最大的原因就是IE相容問題，不過這也不能當作不學習的原因，畢[…] Readmore 難解的CSS排版：認識對齊(上) InHTML/CSS Bymukiwu 我一直很想寫這系列的文章，一來是CSS博大精深，有太多難解的觀念在裡頭。

二來是常常要切很多重複卻又複雜的版[…] Readmore 難解的CSS排版：認識對齊(下) InHTML/CSS Bymukiwu 本文為參加第11屆「iT邦幫忙鐵人賽」系列文章，會優先在部落格發文，再貼到iT邦幫忙。

如果文章對您有[…] Readmore 歡迎給我點鼓勵，讓我知道你來過：）Errorhappened. Login Label {} [+] Name* Email* Website Label {} [+] Name* Email* Website 5則留言 Oldest Newest MostVoted InlineFeedbacks Viewallcomments ZengBravoMan 7yearsago 花了不少時間寫文章分享吧？感謝。

0 Reply muki 7yearsago Replyto  ZengBravoMan 感謝，有人喜歡與閱讀就很開心了>_< 2 Reply 賴痞業 7yearsago 謝謝妳的分享，很實用!! 0 Reply KenHuang 5yearsago 好厲害拜讀～ 0 Reply CarlLu 5yearsago 嗨~我最近剛開始學前端,謝謝妳這篇文章,幫了我很大的忙! 2 Reply 粉絲團相關文章 CSSGrid語法筆記 Tags: CSSGrid,css語法,CSS3,筆記 使用HTML5和jQuery簡易存取資料 Tags: HTML5,技巧,觀念 初探SassMaps與使用介紹 Tags: sass,sassmap,技巧,教學,觀念 學css前要準備什麼? Tags: 原創,系列教學 動手更換Facebook的新版面 Tags: css語法,redesign,原創 SASS,LESS退散，原生CSS可以使用變數啦！ Tags: css語法,CSS3,技巧,教學,觀念,變數 輕鬆上手CSS(III)–基本語法傳授!! Tags: css語法,原創,系列教學 Bootstrap4的Grid應用介紹 Tags: bootstrap,CSS3,Flexbox,GridSystem,RWD,教學 贊助廣告 Copyright(C)MUKIspace*/RebornThemeAllRightsReserved. wpDiscuzInsert