class='stage'的article元素无法页面居中的问题求助

问题根源 #

1. 你的.section类虽然写了justify-content和align-items，但没设置display: flex——这俩属性只有在flex容器中才生效，所以没法控制子元素的居中。
2. .stage只加了margin-right: auto，缺了margin-left: auto，没法通过margin实现块级元素的水平居中。

两种解决办法 #

办法一：用margin让stage水平居中

直接修改.stage的margin属性，同时给.section补上flex设置实现垂直居中：

.section {
  padding: 10rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--container-width);
  min-height: 100vh;
  text-align: center;
  /* 新增flex设置，让子元素垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 可选：控制h2和stage的间距 */
  gap: 2rem;
}

.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;
  /* 修改为左右auto，实现水平居中 */
  margin: 0 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);
}

办法二：完全依靠flex布局让子元素居中

如果不想给stage加margin，只需要把.section改成flex容器，子元素会自动居中：

.section {
  padding: 10rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--container-width);
  min-height: 100vh;
  /* 移除text-align，flex布局已能控制居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem; /* 控制h2和stage的间距 */
}

.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);
}

说明 #

两种方法都能解决问题，选哪种看你的布局需求：如果section里还有行内元素需要text-align:center，就保留该属性；如果全用flex布局，text-align可以去掉。gap属性用来控制子元素间距，你可以根据需求调整数值。

内容的提问来源于stack exchange，提问作者jrodriguezc