css - 水平居中，带 margin 和 max-width

Question

我正在制作 section 元素，其最大宽度为 1000px，边距为 1rem，当用户调整大小时该元素仍然存在低于任何宽度。

main {
    align-items: center;
    background: #eee;
    display: flex;
    flex: 1;
    flex-grow: 1;
    flex-flow: column nowrap;
}

section {
    align-self: stretch;
    background: #fff;
    display: flex;
    margin: 1rem;
    max-width: 1000px;
}

不幸的是，我尝试对此进行调整，结果如下:

• 我有一些东西可以正确居中，最大宽度为 1000px，但侧边距不存在，因为我使用的是 1rem auto。
• 我有一些居中但不尝试调整元素大小的东西。
• 我有一些宽度正确的东西，边距仍然存在，但它是左对齐的。

除了使用 @media block ，我不确定如何让它工作，这不可靠，因为我使用 rem 单位作为边距。

Answer 1

您可以使用 width: calc(100% - 2rem);

Fiddle demo

堆栈片段

main {
    align-items: center;
    background: #eee;
    display: flex;
    flex: 1;
    flex-grow: 1;
    flex-flow: column nowrap;
}

section {
    background: #f00;
    display: flex;
    margin: 1rem;
    width: calc(100% - 2rem);
    max-width: 1000px;
}

<main>
  <section>
    Section
  </section>
</main>