1

I have a very very simple markup and css , but for some reason, I can not seem to center the divs with flexbox . ( horizontal and vertical )

I have gone through many questions / answers - but I can not find the culprit ..

Everything is extremely simple , container, two divs :

<div id="content">
        <div class="logo-box box">
            <img alt="logo" src="http://placehold.it/222x320?text=logo">
        </div>
        <div class="main-box box">
            <h2>loremIpsum</h2>
            <span>Powerful Slogan&trade;</span>
            <ul class="info">
                <li>
                    <h3>Add. 地址</h3>
                    <p>(HK) Street, level, , Bulding ,room, etc ..</p>
                    <p>(CN) 中国广东.. yep, in chinese ..106</p>
                </li>
                <li>
                    <h3>Tel . 电话</h3>
                    <p>HK (+852) 970-0000 </p>
                    <p> CN (+86) 0757-000000 </p>
                </li>
                <li>
                    <h3>Mail. 邮件</h3>
                    <p>info@domain.com </p>
                    <p> admin@domain.com</p>
                </li>
            </ul>
        </div>
    </div>

and flex css for the container :

#content { 
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center; /*should not matter - only one row*/
    align-items: center;
}

When adding the reset, it is even more strange. ( Why ?? )

Here is a js bin : https://jsbin.com/jihaji/edit?html,css,output

Is there something wrong with my markup that I can not see ? With the css ? Or with my whole understanding of the flexbox?

Obmerk Kronen
  • 15,619
  • 16
  • 66
  • 105

1 Answers1

3

The culprit is that you have no extra height in your flex container.

Because the height of the box is the height of the content (height: auto default), there is no room left over for vertical centering.

Add this to your code:

#content { height: 100vh }
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • Thanks, it seem to work, but I still want to understand something .. Do I always need to add height to the container ? and also - why it is not working with `100%` (which i tried before ) but it does with `100vh` ? – Obmerk Kronen Jan 28 '17 at 12:01
  • In CSS, block-level containers normally default to `width: 100%` and `height: auto` (content height). So, yes, without specifying extra height, the box will shrink-wrap the content vertically. – Michael Benjamin Jan 28 '17 at 12:03
  • 2
    To use a percentage height, the height of the parent must be defined. In your code, you have `html, body { height: 100% }` commented out. If you put that code back in, then you can use `#content { height: 100% }`, as well. ([**full explanation**](http://stackoverflow.com/a/31728799/3597276)) – Michael Benjamin Jan 28 '17 at 12:04
  • 1
    @Michael_B .. and your linked answer (in your last comment ) is priceless. . – Obmerk Kronen Jan 28 '17 at 12:10
  • Actually , in the real page ( browser, not jsbin ) it also leaves an overflow ( which I can use `hidden` ) - is that normal ? – Obmerk Kronen Jan 28 '17 at 12:17
  • Can't really be sure without seeing all the code. Have you tried `body { margin: 0; }`? – Michael Benjamin Jan 28 '17 at 12:27