使用 Flexbox 垂直居中 div [重复]答案

【问题标题】：Vertically Center a div using Flexbox [duplicate]使用 Flexbox 垂直居中 div [重复]
【发布时间】：2015-10-24 10:41:24
【问题描述】：

我正在尝试使用flexbox 将div 垂直居中。我有li's，高度为height:100px。然后我尝试像这样垂直居中：align-items: center，顶部被切断。

如何使用Flexbox 垂直居中而不切断顶部？

这是JSFiddle，这是代码sn-p：

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
#flexWrapper {
  display: flex;
  justify-content: center;
  background-color: aqua;
  height: 100%;
  align-items: center;
  /* This statement makes the problem */
  overflow: auto;
}
#flexContainer {
  width: 70%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}
li {
  background-color: tomato;
  border: 1px solid black;
  box-sizing: border-box;
  flex-basis: calc(100%/3);
  height: 100px;
}

<div id="flexWrapper">
  <ul id="flexContainer">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
    <li class="flex-item">9</li>
    <li class="flex-item">10</li>
    <li class="flex-item">11</li>
    <li class="flex-item">12</li>
    <li class="flex-item">13</li>
    <li class="flex-item">14</li>
    <li class="flex-item">15</li>
    <li class="flex-item">16</li>
    <li class="flex-item">17</li>
    <li class="flex-item">18</li>
    <li class="flex-item">19</li>
    <li class="flex-item">20</li>
    <li class="flex-item">21</li>
    <li class="flex-item">22</li>
    <li class="flex-item">23</li>
    <li class="flex-item">24</li>
  </ul>
</div>

【问题讨论】：

我相信我找到了一个简单的解决方案，请参阅我的答案。
除了 align-items 和 justify-content 用于居中弹性项目之外，还有第二种弹性方法：auto 边距。如果要垂直居中的弹性项目溢出弹性容器，第二种方法可能更有用。有关详细信息，请参阅重复参考中的 @Oriol's answer。

标签： html css flexbox

【解决方案1】：

您的 Flex-Fu 没有任何问题，正是您的 flexbox 之外的东西给您带来了不希望的结果。看看下面的 Fiddle 和/或 sn-p：

Fiddle

html {
  box-sizing: border-box;
  font: 400 16px/1.5 'Source Code Pro';
  height: 100vh;
  width: 100vw;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 solid transparent;
}
#flexWrapper {
  display: flex;
  justify-content: center;
  background-color: aqua;
  height: 100%;
  align-items: center;
  /* This statement makes the problem */
  overflow: auto;
}
#flexContainer {
  width: 70%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: flex-start;
}
li {
  background-color: tomato;
  border: 1px solid black;
  box-sizing: border-box;
  flex-basis: calc(100%/3);
  height: 100px;
}

<div id="flexWrapper">
  <ul id="flexContainer">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
    <li class="flex-item">8</li>
    <li class="flex-item">9</li>
    <li class="flex-item">10</li>
    <li class="flex-item">11</li>
    <li class="flex-item">12</li>
    <li class="flex-item">13</li>
    <li class="flex-item">14</li>
    <li class="flex-item">15</li>
    <li class="flex-item">16</li>
    <li class="flex-item">17</li>
    <li class="flex-item">18</li>
    <li class="flex-item">19</li>
    <li class="flex-item">20</li>
    <li class="flex-item">21</li>
    <li class="flex-item">22</li>
    <li class="flex-item">23</li>
    <li class="flex-item">24</li>
  </ul>
</div>

相关代码

html {
    box-sizing: border-box;
    font: 400 16px/1.5 'Source Code Pro';
    height: 100vh;
    width: 100vw;
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
}

我重置了 CSS ✲，然后将 height: 100vh 和 width: 100vw 应用到 <html>，这样您的布局的每一寸都可以看到——没有难看的截断。有关vh 和vw 的更多详细信息，请参阅here。

✲ 所有 CSS 重置规则都是可选的，成功所需的唯一属性是 vh 和 vw。

【讨论】：

将每个元素的边距和内边距重置为零感觉有点过分了。
我只是在演示中使用重置，因为它消除了通常需要我时间调试的默认值和 UA 规则集。我更喜欢处理最小的环境并找到解决方案，而不是摸索浏览器的弱点和荒谬的默认设置。 CSS 重置是可选的，对解决方案的功能并不重要。我将更新我的答案以澄清关键属性..

【解决方案2】：

这个可以接受吗？

#flexWrapper {

justify-content: center;
background-color: aqua;
height: 100%;
width:70%;
margin:0 auto;
}

http://codepen.io/damianocel/pen/gavEzv

要使其具有响应性，您必须使用 % 值而不是 px。

真的取决于您希望布局的外观，总是 3 行 8 列？

【讨论】：

在您发布的链接中，它显示在列中，而不是在行中。另外，您可以编辑 JSFiddle，而不是 codepen 吗？我个人更喜欢 JSFiddle。 :) 谢谢！
好的，我将在 JSFiddle 中将其作为行来执行:-) 那么，只要它的行，该布局就可以了？
我想要3行，（我稍后会更改它，所以我仍然需要灵活性）
@Jessica 给你：jsfiddle.net/6nmnzv8p/2 对于 3 行，只需确保将容器的宽度设置为 3 li 的宽度。然后你可以垂直添加更多的li。
谢谢！当您只有 4 li's 时，它不再垂直居中。 jsfiddle.net/6nmnzv8p/3