Question

我正在尝试使用div垂直居中flexbox。我的li's高度为height:100px。然后我尝试垂直居中，如下所示：align-items: center，顶部被切断。

如何在不使顶部被切断的情况下使用Flexbox垂直居中？

此处为JSFiddle，以及此处的代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您的Flex-Fu没有任何问题，它在您的Flexbox之外会给您带来不良后果。看看下面的小提琴和/或片段：

<强> Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

相关代码

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重置rulsets都是可选的，成功所需的唯一属性是vh和vw。

Answer 2

这个可以接受吗？

#flexWrapper {

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

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

要使其响应，您必须使用％值而不是px。

真的取决于你希望布局看起来如何，总是3行8列？

使用Flexbox

2 个答案: