文章类=“舞台”未在页面中心对齐

Question

下面代码中的

我的文章

class = "stage"

没有与文档中心对齐。我有其他部分和 div 可以对齐，但不是这个。没人能帮我吗？蒂斯姆 我有这个 HTML 代码：

:root {
  --main-font: "Inter", sans-serif;
  --clock-font: "alarm clock", sans-serif;
  --font-size: 15px;
  --white-1: #eee;
  --black-1: #00040a;
  --blue-1: #1653b4;
  --blue-2: #c4cfdd;
  --container-width: 1200px;
}

html {
  box-sizing: border-box;
  color: var(--black-1);
  font-family: var(--main-font);
  font-size: var(--font-size);
  scroll-behavior: smooth;
  background-color: var(--blue-2);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.section {
  padding: 10rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--container-width);
  min-height: 100vh;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.stage {
  font-size: 50px;
  font-family: var(--clock-font);
  background-color: var(--white-1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  height: 50vh;
  width: 67vw;
  border-radius: 25px;
  border: 0;
  z-index: 97;
  box-shadow: inset 0px 0px 10px 5px rgb(196, 207, 221, 0.5);
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50rem;
  background-color: var(--blue-1);
  box-shadow: 0px 0px 10px 5px rgba(151, 182, 221, 0.5);
  transition: transform 0.2s ease-out;
  z-index: 97;
}

<section id="seccion2" class="section">
  <h2>Eventos del teclado</h2>
  <article class="stage">
    <div class="ball"></div>
  </article>
</section>

我尝试询问chatGPT，但它无法给我解决方案。我也尝试过使用“舞台”的边缘和该部分的对齐内容，但我无法想出解决方案。

Answer 1

您已经为该部分提供了边距和填充，这就是它没有居中对齐的原因

:root {
  --main-font: "Inter", sans-serif;
  --clock-font: "alarm clock", sans-serif;
  --font-size: 15px;
  --white-1: #eee;
  --black-1: #00040a;
  --blue-1: #1653b4;
  --blue-2: #c4cfdd;
  --container-width: 1200px;
}

html {
  box-sizing: border-box;
  color: var(--black-1);
  font-family: var(--main-font);
  font-size: var(--font-size);
  scroll-behavior: smooth;
  background-color: var(--blue-2);
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.section {
  padding: 10rem 0;
  width: 100%;
  min-height: 100vh;
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.stage {
  font-size: 50px;
  font-family: var(--clock-font);
  background-color: var(--white-1);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50vh;
  width: 67vw;
  border-radius: 25px;
  border: 0;
  z-index: 97;
  box-shadow: inset 0px 0px 10px 5px rgb(196, 207, 221, 0.5);
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50rem;
  background-color: var(--blue-1);
  box-shadow: 0px 0px 10px 5px rgba(151, 182, 221, 0.5);
  transition: transform 0.2s ease-out;
  z-index: 97;
}

<section id="seccion2" class="section">
  <h2>Eventos del teclado</h2>
  <article class="stage">
    <div class="ball"></div>
  </article>
</section>