使用flex时垂直居中[重复]

Posted 2023-03-05

【中文标题】使用flex时垂直居中[重复]

【英文标题】：Vertical center when using flex [duplicate]

【发布时间】：2021-09-04 01:15:53

【问题描述】：

我试图在 div 中将文本垂直居中，但我使用的是display: flex，所以我不能使用display: table。

在此处垂直居中文本的最佳方式是什么，最好不要添加大量 html 元素（希望尽可能保持“事物”div 的干净）？

Fiddle

.container 
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;


.thing 
  background: red;
  color: white;
  margin: 5px;
  text-align: center;
  display: table;
  flex: 1 0 30%;
  vertical-align: middle;

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

【问题讨论】：

.thing display: flex; align-items: center; 将解决问题。

确实如此！但奇怪的是，它会将文本水平向左推，忽略'text-align'？

在这种情况下还要添加justify-content: center;。但是正如您在我的回答中看到的那样，当您使用 flex-direction 时，它可以流畅地工作。

完美，谢谢

【参考方案1】：

justify-content: center; 和 align-items: center; 在 flex 容器上将强制子级垂直和水平居中。将这些规则添加到.thing，您将获得所需的结果。

.container 
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;

.thing 
    background: red;
    color:white;
    margin: 5px;
    text-align: center;
    display: flex; /* create flex container */
    justify-content: center; /* center horizontally */
    align-items: center; /* center vertically */
    flex: 1 0 30%;
    vertical-align: middle;

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

【参考方案2】：

只需在 CSS 中添加 .thing display: flex; flex-direction: column; justif-content: center; 。 flex-direction: column; 将确保保持正常的块级元素行为。 justify-content: center; 将项目对齐在主轴的中心（在本例中为垂直轴）。

.container 
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;


.thing 
  background: red;
  color: white;
  margin: 5px;
  text-align: center;
  flex: 1 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

【参考方案3】：

.container 
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;


.thing 
  background: #f00;
  color: #fff;
  margin: 5px;
  text-align: center;
  display: table;
  flex: 1 0 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

这是使用 CSS 使文本居中的最常用方法。为了使每个框内的文本居中，我们将每个包含框设为一个 flex 容器。然后将align-items设置为center对块轴进行居中，将justify-content设置为center对内联轴进行居中。

【讨论】：

好的，我会改的

在编辑后撤销了反对票。但是，您仍然有一个错误。它不是block-axis 和inline-axis。这些术语也毫无意义。它的 main-axis (justify-content) 和 cross-axis (align.-items)。这些轴取决于弯曲方向。主轴始终与 flex 方向相同。