純 CSS 做到網頁元素水平垂直置中、置中央

2020/03/05 3,860 2 網站技術 , HTML , CSS

很多人都想用最簡單的方式達成網頁元素水平垂直置中、置中央，其實只要純 CSS 就可以做到囉！這邊直接示範把網頁元素置於整個網頁畫面的中央位置，這樣如果你要做其他的運用也只要簡單修改就可以做到。

這邊首先要把 <html>、<body> 設定為寬高都為 100%，接著建立一個 <div> 容器設定 display 為 flex，接著設定兩個屬性給這個容器：

align-items: center;
justify-content: center;

align-items 是垂直方向對齊；justify-content 是水平方向對齊，center 即中央。最後，在這個 <div> 容器中的元素就會水平垂直置中（置中央）囉！


▲ 網頁元素水平垂直置中、置中央示意圖。

See the Pen
網頁元素水平垂直置中、置中央 - CSS - 萌芽の網頁設計實驗室 by Feng, Cheng-Chi (@qwe987299)
on CodePen.


▲ CodePen 示範。

👉 原始碼（HTML）：

<div id="container">
  中央
</div>

👉 原始碼（CSS）：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
贊助廣告 ‧ Sponsor advertisements
Brackets：佈景主題可更換軟體介面與原始碼顏色標記風格
📆 2018-09-21
📁 軟體應用, 網站技術
【論壇美化】右上角頭像區域美化
📆 2013-01-01
📁 網站技術, 架站程式, Discuz!
HTML:<!--備註-->
📆 2014-01-04
📁 網站技術, HTML
【網站設計】jQuery NailThumb 創立高解析縮圖
📆 2015-06-24
📁 網站技術, jQuery
JavaScript：閏年判斷
📆 2021-03-03
📁 網站技術, JavaScript
【論壇美化】全局框線美化
📆 2013-01-01
📁 網站技術, 架站程式, Discuz!
新手使用虛擬主機的陷阱！檔案數量或索引節點總數限制？
📆 2024-10-30
📁 網站技術, 伺服器
Node-RED：讀取及查詢 MySQL 資料庫中的資料表
📆 2021-11-18
📁 網站技術, 資料庫, Node.js, SQL, Node-RED

留言區 / Comments

萌芽論壇

萌芽站長

您好，我是萌芽系列網站（Mnya Series Website）的站長&創始人，可以稱呼我「萌芽站長」。我的興趣與專長有登山、觀察地形、攝影、旅遊、網頁設計＆架設＆經營、動畫製作、圖片處理、資料彙整等。有任何問題或建議請至萌芽論壇發表。網站業務、商業合作的聯絡方式在「關於本站 → 團隊介紹 → 站長介紹」，很高興認識您！請多指教！