Align elements/item vertically center in CSS Display Flex (flex - direction : column)

Question

enter image description hereI'm new to React and trying a POC with flex. my page have a main div (main_div) with flex direction column, now trying to aling the items vertically in center for its child (months_div_inline and month_div) but it is not working with "align-content" or "justify-content". can any one help me with this thanks in advance.

CheckPOC.js

import React from "react";
import './check.css';
class CheckPOC extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            date: new Date()
        };
    }

    render(){
        const {size} = this.props;      
        return(
            <>
                <div 
                    className="main_div"
                    style={{width:size, height:size}}>
                    <div className="header_div">
                        <div className="months_div_inline month_name">{"Months"}</div>
                    </div>
                    <div className="month_div">check</div>
                </div>
            </>
        );
    }
};

export default CheckPOC;

check.css

.main_div {
    border:2px ridge grey;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-content: center;

}

.header_div {
    flex: 1;
    background-color: antiquewhite;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    /* display: inline; */
    margin: 0px;
    vertical-align: middle;
}


.month_name {
    flex: 5;
    /*vertical-align: middle;*/
}


.month_div {
    flex: 7;
    /* background-color:darkgray; */
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    /* align-items: center; */
}

Answer 1

Using justify-content: center In your .main_div class should fix your issue.

When using display: flex; flex-direction: column;, the cross axis and main axis switch from when using the default flex-direction: row;.

For flex-direction: row; (the default):

justify-content controls horizontal alignment.

align-items and align-content control vertical alignment.

For flex-direction: column;

justify-content controls vertical alignment.

align-items and align-content control horizontal alignment.