標題重寫為：使用Flexbox實現元素的水平和垂直居中

Question

如何使用flexbox在容器中水平和垂直居中div。在下面的範例中，我希望每個數字都在下面（按行）居中。

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
row {
  width: 100%;
}
.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<div class="flex-container">
  <div class="row">
    <span class="flex-item">1</span>
  </div>
  <div class="row">
    <span class="flex-item">2</span>
  </div>
  <div class="row">
    <span class="flex-item">3</span>
  </div>
  <div class="row">
    <span class="flex-item">4</span>
  </div>
</div>

http://codepen.io/anon/pen/zLxBo

Answer 1

如何在Flexbox中垂直和水平居中元素

以下是兩種常見的居中解決方案。

一種用於垂直對齊的彈性項目（flex-direction: column），另一種用於水平對齊的彈性項目（flex-direction: row）。

在這兩種情況下，居中的div的高度可以是可變的，未定義的，未知的，不重要。

以下是兩者的HTML程式碼：

<div id="container"><!-- flex容器 -->

    <div class="box" id="bluebox"><!-- flex项目 -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex项目 -->
        <p>DIV #2</p>
    </div>

</div>

---

CSS（不包括裝飾樣式）

當彈性項目垂直堆疊時：

#container {
    display: flex;           /* 建立flex容器 */
    flex-direction: column;  /* 将主轴设置为垂直方向 */
    justify-content: center; /* 在这种情况下，垂直居中项目 */
    align-items: center;     /* 在这种情况下，水平居中项目 */
    height: 300px;
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;     /* 将文本在<p>中居中，<p>不是flex项目 */
}

示範

---

當彈性項目水平堆疊時：

調整上面程式碼中的flex-direction規則。

#container {
    display: flex;
    flex-direction: row;     /* 将主轴设置为水平方向（默认设置） */
    justify-content: center; /* 在这种情况下，水平居中项目 */
    align-items: center;     /* 在这种情况下，垂直居中项目 */
    height: 300px;
}

示範

---

居中彈性項目的內容

彈性格式化上下文的範圍僅限於父子關係​​。超出子代的彈性容器的後代不參與彈性佈局，並將忽略彈性屬性。基本上，彈性屬性在子代之外不可繼承。

因此，您始終需要將display: flex或display: inline-flex套用到父元素，以便將彈性屬性套用到子元素。

為了垂直和/或水平居中文字或其他內容，使專案成為（嵌套的）彈性容器，並重複居中規則。

.box {
    display: flex;
    justify-content: center;
    align-items: center;        /* 对于单行弹性容器 */
    align-content: center;      /* 对于多行弹性容器 */
}

更多細節請參見：如何在flexbox中垂直對齊文字？

或者，您可以將margin: auto套用到彈性項目的內容元素。

p { margin: auto; }

在這裡了解有關彈性auto邊距的更多資訊：對齊彈性項目的方法（請參閱box＃56）。

---

居中多行彈性項目

當彈性容器有多行（由於換行）時，align-content屬性將對交叉軸對齊至關重要。

來自規範：

#

更多細節請參閱：flex-wrap如何與align-self，align-items和align-content一起工作？

---

瀏覽器支援

所有主要瀏覽器都支援Flexbox，除了IE < 10。一些最近的瀏覽器版本，如Safari 8和IE10，需要供應商前綴。為了快速加上前綴，可以使用Autoprefixer。更多詳細資訊請參考這個答案。

---

舊瀏覽器的居中解決方案

有關使用CSS表格和定位屬性的替代居中解決方案，請參閱此答案：https://stackoverflow.com/a/31977476/3597276

#

Answer 2

我認為你想要的是以下內容。

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>