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,888
1
17
39

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

216
3
20

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