移动端视图下CSS Flexbox部分元素未居中问题求助

问题现象 #

使用Flexbox布局的页面在桌面视图下所有元素均居中，但切换到移动端后，appName（h1）和appDescription（p）两个元素未居中，其余元素（instructions、potd）正常居中。

相关代码 #

桌面视图样式 #

const useStyles = makeStyles((theme) => {
  return ({
    home: {
      display: 'flex',
      alignItems: 'center',
      flexDirection: 'column',
    },
    appName: {
      margin: '3rem 0 3rem 0',
      fontSize: '3rem',
    },
    appDescription: {
      fontSize: '1.5rem',
    },
    instructions: {
      margin: '1rem',
    },
    potd: {
      marginTop: '3rem',
      textDecoration: 'underline'
    },
  })
})

移动端视图样式 #

[theme.breakpoints.down('sm')]: {
      home: {
        display: 'flex',
        alignItems: 'center',
        flexDirection: 'column',
      },
      appName: {
        fontSize: '1.5rem',
        margin: '2rem 0 2rem 0',
      },
      appDescription: {
        fontSize: '1.5rem',
      },
      instructions: {
        margin: '1rem',
      },
      potd: {
        marginTop: '3rem',
        textDecoration: 'underline'
      },
}

HTML结构 #

<div className={classes.home} >
  <h1 className={classes.appName} >International Space Station Tracker</h1>
  <p className={classes.appDescription} >Follow the ISS on its journey around the globe. 
    Get real time data on it's current location and the astronauts on board.
  </p>
  <p className={classes.instructions} >- Open the menu and select ISS Map -</p>
  <h2 className={classes.potd} >NASA Photo of the Day</h2>
</div>

问题原因 #

1. Flex容器home设置了flex-direction: column和align-items: center，该规则仅控制子元素本身在水平方向的位置，不影响元素内部文本的对齐方式。
2. appName和appDescription在移动端因屏幕宽度限制，文本自动换行，元素宽度被撑满父容器；而块级元素默认text-align: left，导致文本左对齐，视觉上呈现未居中的效果。
3. instructions和potd内容较短，元素宽度由内容决定，在align-items: center作用下元素整体居中，文本自然随之居中。

修复方案 #

方案1：单独给目标元素添加文本居中样式 #

修改桌面和移动端样式，为appName和appDescription添加text-align: center：

// 桌面视图样式修改
appName: {
  margin: '3rem 0 3rem 0',
  fontSize: '3rem',
  textAlign: 'center',
},
appDescription: {
  fontSize: '1.5rem',
  textAlign: 'center',
},

// 移动端视图样式修改
appName: {
  fontSize: '1.5rem',
  margin: '2rem 0 2rem 0',
  textAlign: 'center',
},
appDescription: {
  fontSize: '1.5rem',
  textAlign: 'center',
},

方案2：在父容器统一设置文本居中 #

直接在home容器中添加text-align: center，让所有子元素继承该样式，更简洁：

home: {
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column',
  textAlign: 'center',
},

两种方案都能确保所有元素的文本在桌面和移动端视图下均保持居中效果。

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