How do I center elements in a Flexbox column?

Question

I have a one pager HTML site. I am trying to center the content in the middle vertically (so that the image, the text below it and the two buttons are moving a little bit more down) on this website: https://werwichtelt.de

score 0 · Answer 1 · answered Feb 28 '20 at 04:00

0

Add to your main element

main {
     display: flex;
     align-items: center;
}

answered Feb 28 '20 at 04:00

Tan Dat

2,349
14
35

It’s perfectly working on desktop. But now the main area is not completely shown on mobile, since it’s try to fit on one screen and overlapped by the footer. I just want the header, main area centered, bottom area. If it’s fitting on the screen, perfect, if not, scroll – user3532201 Feb 28 '20 at 04:29

score 0 · Answer 2 · answered Feb 28 '20 at 05:10

0

may this will work

main {
    display: flex;
    jutify-content:center;
    width: 100%;
}

answered Feb 28 '20 at 05:10

Mr Freak

197
1
18

Unfortunately not, this puts the footer up – user3532201 Feb 28 '20 at 05:31

How do I center elements in a Flexbox column?

2 Answers2