Flexbox：如何垂直居中[重复]

Posted 2023-03-29

【中文标题】Flexbox：如何垂直居中[重复]

【英文标题】：Flexbox: How to center vertically [duplicate]

【发布时间】：2019-06-28 08:53:27

【问题描述】：

我正在使用 flexbox 并且已经成功使其水平居中，您可以通过运行下面的 sn-p 看到，但它没有垂直居中，我不明白为什么

如果您愿意，这里是JSFiddle。

.main 
  display: flex;
  align-items: center;
  justify-content: center;



.loader 
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

  max-width: 50%;


/* Safari */
@-webkit-keyframes spin 
  0%  -webkit-transform: rotate(0deg); 
  100%  -webkit-transform: rotate(360deg); 


@keyframes spin 
  0%  transform: rotate(0deg); 
  100%  transform: rotate(360deg); 

<div class="main">
    <div class="loader"></div>
</div>

【问题讨论】：

我认为你是对的。降级是没有必要的。所以我没有。您的问题被标记为重复无需担心。这只是为了让其他用户知道。 ;)

实际上我认为将该问题标记为重复是错误的。第二个链接甚至没有解决问题。 OP 的问题是关于他在 flex 布局中正确使用 align-items 的意外结果，而不是如何设置 div 的高度。

如果你以后遇到 flexbox 的问题，请参考这个网站the-echoplex.net/flexyboxes。它可以帮助您可视化输出并生成基本代码。我不会只是复制并传递输出，因为它非常冗长。但是试一试它真的很有帮助。

@TemaniAfif 感谢您提出如何证明我的观点的建议。如果我用寓言代替，请不要感到被冒犯。 Q.A：如何不被雨淋湿？ A.A：用雨伞！ Q.B：为什么打了伞还是会被淋湿？ A.B：你需要打开它！我不认为 Q.B 是 Q.A 的复制品。不管怎样：我明白你的意思。但我认为重要的是，SO 必须非常小心，不要通过将特定问题标记为更广泛问题的重复来阻止人们提出特定问题。

@TemaniAfif 实际上，接受的答案准确地解释了为什么 OP 的方法在第一行失败了。我的comment 也是如此。而***.com/a/41164964/8620333 只提供鱼。

【参考方案1】：

你需要给主类一个height。如：height: 100vh;见：

.main 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;



.loader 
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  max-width: 50%;


/* Safari */
@-webkit-keyframes spin 
  0%  -webkit-transform: rotate(0deg); 
  100%  -webkit-transform: rotate(360deg); 


@keyframes spin 
  0%  transform: rotate(0deg); 
  100%  transform: rotate(360deg); 

<div class="main">
    <div class="loader"></div>
</div>

【参考方案2】：

.main 元素与 .loader 元素具有相同的高度（即项目垂直居中，但没有空间可以看到它）。 您需要将 .main 的高度设置为您想要居中的高度。

.main 
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;



.loader 
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

  max-width: 50%;


/* Safari */
@-webkit-keyframes spin 
  0%  -webkit-transform: rotate(0deg); 
  100%  -webkit-transform: rotate(360deg); 


@keyframes spin 
  0%  transform: rotate(0deg); 
  100%  transform: rotate(360deg); 

<div class="main">
    <div class="loader"></div>
</div>

【讨论】：

非常感谢您的回答！ :) 很抱歉问这个问题，但你能支持我的问题吗？有些人觉得投反对票很有趣。