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

2020/03/05 3,894 3 網站技術 , 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
Node-RED：將資料寫入至 MSSQL 資料庫中的資料表
📆 2021-12-07
📁 網站技術, 資料庫, Node.js, Node-RED
CSS:反白特效
📆 2013-01-01
📁 網站技術, CSS
Native Lazyload：原生延遲載入功能登場！純 HTML 就能做到！
📆 2019-09-14
📁 軟體應用, 瀏覽器, 網站技術, HTML, 架站程式, WordPress, Google Chrome
React 初嘗試(二)：利用 Babel CDN 讓瀏覽器直接跑 JSX
📆 2019-08-17
📁 網站技術, HTML, JavaScript, React
Node-RED：Dashboard 使用 button 和 ui control 切換 tab
📆 2021-12-28
📁 網站技術, Node.js, Node-RED
Node.js：Webpack 封裝 CSS、SCSS 成單一 JS 教學（使用 VS Code）
📆 2019-08-19
📁 軟體應用, 網站技術, CSS, Sass/SCSS, JavaScript, Node.js, Webpack
Path Intellisense（Visual Studio Code 擴充功能）：自動填充文件名工具
📆 2019-02-11
📁 軟體應用, 網站技術
Sass/SCSS 初嘗試，新手入門語法教學 ◆ 進階的 CSS：巢狀結構、變數、函數、迴圈與繼承等
📆 2019-03-19
📁 網站技術, Sass/SCSS

留言區 / Comments

萌芽論壇

萌芽站長

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