Best way to align vertically <div> with different flex directions?-CodePudding

I several 'div' in my 'body' and I'd like to vertically center the items inside those 'div' but some of them has column as flex-direction.

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body div{
    flex: 1;
}
.header {
    display: flex;
    justify-content: space-between;
    background-color: RGB(230, 230, 230);
    align-items: center;
}

.header ul {
    display: flex;
    list-style-type: none;
    gap: 10px;
    margin: 0px;
    padding: 0px;
}

.description {
    background-color: RGB(200, 200, 200);
    display: flex;
    align-items: center;
}

.img {
    max-width: 500px;
    height: auto;
}

.information {
    display: flex;
    flex-direction: column;
    background-color: RGB(170, 170, 170);
    align-items: center;
}

.information .card {
    display: flex;
}

.quotes {
    display: flex;
    flex-direction: column;
    background-color: RGB(130, 130, 130);
    align-items: center;
}

.signup {
    display: flex;
    background-color: RGB(100, 100, 100);
    align-items: center;
}

.footer {
    display: flex;
    background-color: RGB(70, 70, 70);
    align-items: center;
}

what would be the best way to align vertically the items inside those 'div'? Should I just individually do that or is there any better way to do so?

CodePudding user response：

You could use justify-content: center and align-items: center, but in this case you may want to check out CSS grid.

CodePudding user response：

in the css class you can add multiple css blocks

with the footer section it would be

so add a align class with .align

.align{
    align-items:center;
}

then change to