如何调整React Counter组件布局实现按钮下移并整体居中

解决方案 #

你无需修改counter.js的代码，仅调整Counter.css样式即可实现需求，具体修改如下：
flex布局默认是横向排列，我们只要修改flex主轴方向为纵向，再调整对齐规则就能实现要求，且全程保留display: flex属性。
修改后的完整CSS代码如下：

/* 先补充全局样式，确保.counter的100%宽高生效，已有全局重置可省略 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #000; /* 适配原有白色文字的背景，可按需调整 */
}

.counter {
  display: flex;
  /* 新增以下两行样式 */
  flex-direction: column;
  justify-content: center;
  color: white;
  align-items: center;
  width: 100%;
  height: 100%;
}

.counter > .counter__buttons > button {
  color: black;
  background-color: grey;
  margin: 10px;
  padding: 30px;
  border: 0;
  border-radius: 10px;
}

修改后计数器文字会显示在上方，两个按钮水平排列在文字下方，整体内容在页面正中央，完全符合需求。

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