Vertical and Horizontal Flexbox Containter Allign

Question

I'm trying to place my both divs that are in the flexbox container in the middle of the screen. I tried with margin top and things like that, but I want them just in the middle of the page.

.flexbox-container
    display: flex
    justify-content: center
    flex-direction: row
    flex-wrap: wrap
    min-height: 100%
    align-self: center

.flexbox-item
    width: 500px
    margin: 100px 60px
    background-color: white

.flexbox-item-1
    min-height: 500px


.flexbox-item-2
    min-height: 500px

score 1 · Answer 1 · answered May 11 '20 at 20:37

1

Solved! I give HTML and Body tags a "height: 100%" and perfect, placed in the middle of the screen!

answered May 11 '20 at 20:37

Rares-Andrei Panait

19
5

score 0 · Answer 2 · answered May 11 '20 at 20:37

0

You are almost there, just missing align-items in the container.

.flexbox-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    min-height: 100%;
    align-items: center;
}

answered May 11 '20 at 20:37

Jarek Danielak

394
4
18

I just solved giving html and body tags a height of 100%, and then worked perfectly with the code from above. Thanks a lot for your help! – Rares-Andrei Panait May 11 '20 at 20:39

score 0 · Answer 3 · answered May 11 '20 at 20:37

0

Use align-items.

.flexbox-container
    display: flex
    justify-content: center
    flex-direction: row
    flex-wrap: wrap
    min-height: 100%
    align-self: center
    align-items:center

.flexbox-item
    width: 500px
    margin: 100px 60px
    background-color: white

.flexbox-item-1
    min-height: 500px


.flexbox-item-2
    min-height: 500px

answered May 11 '20 at 20:37

atultw

921
7
15

I just solved giving html and body tags a height of 100%, and then worked perfectly with the code from above. Thanks a lot for your help! – Rares-Andrei Panait May 11 '20 at 20:39

Vertical and Horizontal Flexbox Containter Allign

3 Answers3