How to make flex children align to the middle?

Question

This is what I want it to look like:

This is what it looks like now:

Currently, the parent has a display of flex, and it's relevant code is:

display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;

with the children having the code of:

flex: 0 0 100%;

In a different project I made it work by giving the parent a display of table and the children a display of table-cell and vertical-align: middle. However, using table to position elements isn't a good practise.

score 1 · Accepted Answer · answered Apr 04 '21 at 06:50

1

Did you set the right direction?

flex-direction: column;

answered Apr 04 '21 at 06:50

Jelmer Jellema

1,072
10
16

1

Would this for the children or the parent? – Zak Apr 04 '21 at 06:52
1

Just added it to the parent and it's all working. Thanks! – Zak Apr 04 '21 at 06:56

How to make flex children align to the middle?

1 Answers1