5

I am trying to center a div vertically, using flexbox. I have li's with a height of height:100px. I then tried vertically centering it like this: align-items: center, and the top part gets cut off.

How can I vertically center something using Flexbox without the top part getting cut off?

Here's the JSFiddle, and here's the code snippet:

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>
Jessica
  • 9,379
  • 14
  • 65
  • 136
  • I believe I found a simple solution see my answer. – zer00ne Oct 24 '15 at 00:34
  • In addition to `align-items` and `justify-content` for centering flex items, there is a second flex method: `auto` margins. In cases where the flex item to be vertically centered overflows the flex container, the second method may be more useful. See [@Oriol's answer](http://stackoverflow.com/a/32672661/3597276) in the duplicate reference for more details. – Michael Benjamin Oct 24 '15 at 12:50

2 Answers2

0

Nothing is wrong with your Flex-Fu, it's what's outside of your flexboxes that are giving you undesirable results. Take a look at the Fiddle and/or snippet below:

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>

Relevant Code

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

I reset the CSS ✲ then applied height: 100vh and width: 100vw to <html> so that every inch of your layout is viewable--no unsightly cutoff. Further details on vh and vw can found here.

✲ All CSS reset rulsets are optional, the only properties required to succeed are vh and vw.

zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • Resetting every elements margin and padding to zero feels a bit over the edge. – Hoshts Oct 24 '15 at 01:00
  • I just use reset in demos because it eliminates defaults and UA rulesets that would normally take me time debugging. I prefer dealing with a minimal environment and finding a solution rather than fumble around with browser foibles and ridiculous defaults. The CSS resets are optional and not critical to the solution's function. I will update my answer to clarify the key properties.. – zer00ne Oct 24 '15 at 02:36
-1

Is this one acceptable?

#flexWrapper {

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

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

To have it responsive you will have to use % values instead of px.

Really depends how you want the layout to look, always 3 rows and 8 columns?

damiano celent
  • 721
  • 6
  • 12