如何让Semantic UI React Grid容器内元素水平垂直居中？

问题说明 #

我用Semantic UI React的<Grid container>做了一个两列布局，代码如下：

export default function HomePage() {
    return (
        <>
            <Grid container doubling divided stackable columns={2}>
                <Grid.Column width={5} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Container>
                        <Header as='h1' color="black" style={{ fontSize: '360%' }}>
                            Welcome!
                        </Header>
                        <Header as='h2'>
                            Welcome new message!
                            <Header.Content>
                                <Header.Subheader>Small welcome message!</Header.Subheader>
                            </Header.Content>
                        </Header>
                    </Container>
                </Grid.Column>
                <Grid.Column width={11} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Image src='/images/savannah.png' />
                </Grid.Column>
            </Grid>
        </>
    )
}

当前元素未实现垂直居中，我需要让Grid容器内的元素同时水平、垂直居中，但给Grid容器添加style={{ display: "flex", alignItems: "center", justifyContent: "center" }}完全无效，求可行解决方法。

解决方法 #

1. 先设置全局高度基础 #

垂直居中的前提是容器有足够垂直空间，需先给html和body添加样式避免高度塌陷：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. 调整Grid容器的样式 #

Semantic UI的Grid组件自带默认布局样式，直接替换display:flex可能和内置样式冲突，需结合高度设置和正确的flex属性：
给Grid container添加以下样式：

<Grid 
  container 
  doubling 
  divided 
  stackable 
  columns={2}
  style={{ 
    minHeight: '100vh',  // 让Grid占满视口高度
    display: 'flex', 
    alignItems: 'center',  // 垂直居中
    justifyContent: 'center',  // 水平居中
    flexDirection: 'row'  // 保持横向布局，避免列堆叠
  }}
>

修改后的完整代码 #

export default function HomePage() {
    return (
        <>
            <Grid 
                container 
                doubling 
                divided 
                stackable 
                columns={2}
                style={{ 
                    minHeight: '100vh',
                    display: 'flex', 
                    alignItems: 'center', 
                    justifyContent: 'center',
                    flexDirection: 'row'
                }}
            >
                <Grid.Column width={5} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Container>
                        <Header as='h1' color="black" style={{ fontSize: '360%' }}>
                            Welcome!
                        </Header>
                        <Header as='h2'>
                            Welcome new message!
                            <Header.Content>
                                <Header.Subheader>Small welcome message!</Header.Subheader>
                            </Header.Content>
                        </Header>
                    </Container>
                </Grid.Column>
                <Grid.Column width={11} style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <Image src='/images/savannah.png' />
                </Grid.Column>
            </Grid>
        </>
    )
}

原理说明 #

• minHeight: '100vh'让Grid容器占据整个视口高度，这是垂直居中的必要条件，否则容器高度仅由内容撑开，垂直居中效果无法体现。
• flexDirection: 'row'确保两列保持横向排列，避免Semantic Grid的默认布局被flex属性打乱。
• 全局设置html, body的高度，确保视口高度能正确传递给Grid容器。

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