我正在學習使用css和移動響應，并且遇到了一個棘手的問題。我有一些我正在使用flexbox的內容，在桌面視圖上看起來一切正常，但在移動視圖上卻不像我希望的那樣。

以下是桌面視圖的屏幕截圖:

和它的css:

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'
    },

以下是移動視圖的屏幕截圖:

這方面的css是:

[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>

因此，flexbox在桌面視圖中工作，并將所有內容居中，但當我切換到移動視圖時，前兩項(appName和appDescription)沒有居中。另外兩個(instructiond和potd)是居中的。有人能解釋一下這是為什么嗎？我該如何解決這個問題？

您的對齊僅適用于Flex容器中的項目。這意味著您要對齊項目，而不是內容。你的桌面版本看起來很好，因為文本在外面不會太長。

您可以使用屬性text-align:center，或者如果您想保持在Flex中，您可以使用justify-content:center