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

2020/03/05 88 網站技術 , 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
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB