點燈坊

學而時習之,不亦悅乎

CSS Flexbox 之同時水平垂直置中

Sam Xiao's Avatar 2019-07-09

justify-content 可處理 水平置中,亦可 垂直置中,若要同時 水平置中垂直置中,還必須使用 align-items

Version

macOS Mojave 10.14.5
WebStorm 2019.1.3
CSS 3
Chrome 75.0.3770.100

Chrome

centor000

Hello World 同時 水平置中垂直置中 於頁面中心。

centor002

儘管改變 browser 的 width 與 height,Hello World 一樣維持在頁面中心。

HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="box">
    <div class="row">Hello World</div>
  </div>
</body>
</html>

Hello World 位於內層 <div>

CSS

style.css

.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 100vh;
}

.row {
  height: 10%;
}

第 1 行

.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 100vh;
}

displayflex,表示使用 flexbox,先將外層 <div> 水平置中,再將 Hello World 垂直置中。

flex-directionrow,表示 main axis 為 row,cross axis 為 column

justify-contentcenter,表示 main axis 為 置中,也就是 水平置中

align-itemscenter,表示 cross axis 亦為 置中,也就是 垂直置中

max-width100%,表示最大寬度為 100%

height100vh,表示高度為 browser 高度。

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 100vh;
}

同理,也能先 垂直置中 然後 水平置中,只要將 flex-direction 改設定為 column 即可,其餘不變。

10 行

.row {
  height: 10%;
}

row class 為內層 <div> 所用。

height 設定 10%Hello World 的高度。

Conclusion

  • 無論先 水平置中垂直置中 皆可,重點是 justify-content 處理 main axis 置中,而 align-items 處理 cross axis 置中

Reference

MDN, Aligning Items in a Flex Container