如何使容器水平居中而不使容器内的文本居中？答案

【问题标题】：How to center a container horizontally without centering the text inside the container?如何使容器水平居中而不使容器内的文本居中？
【发布时间】：2020-07-17 07:41:27
【问题描述】：

问题 1：如何在 Typography 保持在左侧时将容器 div 水平居中？

想要的结果：

问题2：如何在不使用margin-top或transform: translate的情况下自动将任何组件放在AppBar下方？

这里是代码：https://codesandbox.io/s/mui-drawer-bpskw?file=/src/components/what_is_covid/about.module.css

【问题讨论】：

您的链接只显示导航栏
@NicoShultz 因为它是主页，文本隐藏在 AppBar 下，我没有应用 margin-top
您可以通过点击顶部的menu icon 切换到不同的组件

标签： css flexbox material-ui

【解决方案1】：

1：如何在 Typography 保持在左侧时将容器 div 水平居中？

从._src_components_what_is_covid_about_module__container 中删除align-items: center; 并添加以下内容

._src_components_what_is_covid_about_module__container {
    margin: auto;
    width: fit-content;
}

如何在不使用margin-top 或transform: translate 的情况下自动将任何组件放在AppBar 下方？

如果没有顶部边距，您将无法获得此内容，我已在所有页面上都这样修复它。

.App {
    font-family: sans-serif;
    margin-top: 100px;
}

这里唯一的问题是你navbar 没有固定的高度，所以如果它高于 100 像素，内容仍然会在它下面

【讨论】：

我已经将它添加到你的styles.css中你能看到吗？
有没有办法修复导航栏！
这是怎么回事？
你不能用我的代码做任何改变，所以 fork 并分享你的代码和框代码的链接
codesandbox.io/s/mui-drawer-sijk0?file=/src/styles.css

【解决方案2】：

您可以使用 FLEXBOX 对齐方式来执行此操作

.container {
    position: relative;
    width: 100%;
    /* margin-top: 100px; */
    display: flex !important;
    align-items: center;
    flex-direction: column;
}

.containerText {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 100; 
}

并在 about 组件中将 Typography 组件包装在一个带有 containerText 类的 div 中，如下所示

<div className={styles.containerText}>
    <Typography
        align="left"
        varient="h4"
        color="secondary"
        style={{ marginBottom: "15px" }}
    >
        What is COVID-19?
    </Typography>
</div>

【讨论】：