Titel umgeschrieben als: Flexbox verwenden, um eine horizontale und vertikale Zentrierung von Elementen zu erreichen

Question

So zentrieren Sie ein Div mithilfe von Flexbox horizontal und vertikal in einem Container. Im folgenden Beispiel möchte ich, dass jede Zahl unten zentriert ist (Zeile für Zeile).

.flex-container {
  Polsterung: 0;
  Rand: 0;
  Listenstil: keiner;
  Anzeige: Flex;
  align-items: center;
  rechtfertigen-Inhalt: Mitte;
}
Reihe {
  Breite: 100 %;
}
.flex-item {
  Hintergrund: Tomate;
  Polsterung: 5px;
  Breite: 200px;
  Höhe: 150px;
  Rand: 10px;
  Zeilenhöhe: 150px;
  Farbe weiß;
  Schriftdicke: fett;
  Schriftgröße: 3em;
  Textausrichtung: Mitte;
}

<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>