React中Flex(column方向)子元素垂直居中失效问题求助

问题描述 #

我是React新手，正在进行一个Flex布局的POC开发。页面中的主容器main_div设置了flex-direction: column，尝试让其子元素months_div_inline和month_div垂直居中，但使用align-content或justify-content属性均无效，希望能得到帮助。

相关代码 #

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; */
}

解决方案 #

问题根源 #

1. align-content误用：align-content仅在flex容器内子元素换行（flex-wrap: wrap）时生效，单行场景下完全不起作用。
2. 子元素flex属性占满空间：header_div和month_div设置的flex:1、flex:7会让它们自动填充main_div的全部垂直空间，没有剩余空间实现居中效果。
3. 嵌套层级未设置flex：months_div_inline是header_div的子元素，仅靠vertical-align无法实现居中，需要给父容器header_div设置flex布局。

修改方案 #

方案1：让header_div和month_div整体在main_div中垂直居中

移除子元素的flex属性，调整main_div的flex属性实现整体居中，同时给header_div设置flex让内部文字居中：

.main_div {
    border:2px ridge grey;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直居中子元素 */
    align-items: center; /* 水平居中子元素（可选） */
    gap: 16px; /* 子元素间添加间距（可选） */
}

.header_div {
    background-color: antiquewhite;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px; /* 避免文字贴边（可选） */
}

.month_name {
    /* 移除flex属性，无需占满空间 */
}

.month_div {
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 8px 16px; /* 避免文字贴边（可选） */
}

方案2：保留子元素比例，让内部内容各自居中

如果需要header_div和month_div保持原有的空间占比，只需给这两个容器也添加flex布局，让内部内容居中：

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

.header_div {
    flex: 1;
    background-color: antiquewhite;
    border-top-right-radius: 24px;
    border-top-left-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.month_div {
    flex: 7;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

内容的提问来源于stack exchange，提问作者Ritesh Kumar