CODEWITHSUNDEEP
htmlcssflexbox
Aleksandr
Aleksandr

Reputation: 437

Flexbox does not vertically align

I need some help vertically aligning the following table. I can not understand the reason why it doesn't vertically align.

HTML:

<table>
    <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
</table>

CSS:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

Fiddle

Upvotes: 0

Views: 57

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

You can fix it with this style:

body, html {
  height: 100%;
}

Without this, the body's height takes up only enough space to hold its content.

Fiddle

Upvotes: 2

Related Questions