html - 在 CSS 中居中 div - 这是如何工作的？

Question

我不明白它是如何工作的以及为什么它居中。为什么是 width: 70%; 而不是 50%/25%？

我无法理解这个问题。我只是想学习网络开发的基础知识。我完全被难住了。

body,
html {
  margin: 0;
  padding: 0;
}

.wrapper {
  margin: 0 auto;
  width: 70%;
}

.top-header {
  background-color: yellow;
  width: 100%;
  height: 100px;
}

.main-content {
  background-color: red;
  width: 100%;
  height: 25px;
}

<div class="wrapper">
  <div class="top-header">
  </div>
  <div class="main-content">
  </div>
  <div class="bottom-footer">
  </div>
</div>

Answer 1

width: 70% 只是一个选项，它可以是 50% 或 25%。没关系。当您使用 margin: auto 时，重要的是要有一个 width。将 margin 设置为 auto 将自动计算元素与其容器的距离并相应地调整居中的元素