我试图div垂直居中,使用flexbox.我有li's一个高度height:100px.然后我尝试垂直居中,如下所示:align-items: center顶部被切断.
如何在Flexbox没有顶部被切断的情况下垂直居中使用？
这是JSFiddle,这里是代码片段:
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>您的 Flex-Fu 没有任何问题，而是 Flexbox 外部的内容给您带来了不良结果。看看下面的小提琴和/或片段：
\n\n\n\nhtml {\r\n box-sizing: border-box;\r\n font: 400 16px/1.5 \'Source Code Pro\';\r\n height: 100vh;\r\n width: 100vw;\r\n}\r\n*,\r\n*:before,\r\n*:after {\r\n box-sizing: inherit;\r\n margin: 0;\r\n padding: 0;\r\n border: 0 solid transparent;\r\n}\r\n#flexWrapper {\r\n display: flex;\r\n justify-content: center;\r\n background-color: aqua;\r\n height: 100%;\r\n align-items: center;\r\n /* This statement makes the problem */\r\n overflow: auto;\r\n}\r\n#flexContainer {\r\n width: 70%;\r\n list-style-type: none;\r\n padding: 0;\r\n margin: 0;\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n align-items: center;\r\n align-content: flex-start;\r\n}\r\nli {\r\n background-color: tomato;\r\n border: 1px solid black;\r\n box-sizing: border-box;\r\n flex-basis: calc(100%/3);\r\n height: 100px;\r\n}<div id="flexWrapper">\r\n <ul id="flexContainer">\r\n <li class="flex-item">1</li>\r\n <li class="flex-item">2</li>\r\n <li class="flex-item">3</li>\r\n <li class="flex-item">4</li>\r\n <li class="flex-item">5</li>\r\n <li class="flex-item">6</li>\r\n <li class="flex-item">7</li>\r\n <li class="flex-item">8</li>\r\n <li class="flex-item">9</li>\r\n <li class="flex-item">10</li>\r\n <li class="flex-item">11</li>\r\n <li class="flex-item">12</li>\r\n <li class="flex-item">13</li>\r\n <li class="flex-item">14</li>\r\n <li class="flex-item">15</li>\r\n <li class="flex-item">16</li>\r\n <li class="flex-item">17</li>\r\n <li class="flex-item">18</li>\r\n <li class="flex-item">19</li>\r\n <li class="flex-item">20</li>\r\n <li class="flex-item">21</li>\r\n <li class="flex-item">22</li>\r\n <li class="flex-item">23</li>\r\n <li class="flex-item">24</li>\r\n </ul>\r\n</div>相关代码
\n\nhtml {\n box-sizing: border-box;\n font: 400 16px/1.5 \'Source Code Pro\';\n height: 100vh;\n width: 100vw;\n}\n*, *:before, *:after {\n box-sizing: inherit;\n margin: 0;\n padding: 0;\n border: 0 solid transparent;\n}\n我重置了 CSS \xe2\x9c\xb2然后应用了height: 100vh和width: 100vw，<html>以便布局的每一英寸都可见 - 没有难看的截止。vh有关和 的更多详细信息可以在此处vw找到。
\xe2\x9c\xb2所有 CSS 重置规则集都是可选的，成功所需的唯一属性是vh和vw。