如何将Enter按钮调整至页面中央位置？

下面是几种简单可靠的实现方案，基于你提供的现有代码修改：

方法1：Flexbox布局（推荐，现代浏览器支持） #

给页面根容器（<body>）添加Flex属性，让内部元素自动双方向居中：

/* 重置默认边距，避免页面留白影响居中效果 */
body {
  margin: 0;
  min-height: 100vh; /* 让body占满整个视口高度 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.button {
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
}

HTML可保留原有结构，也可优化为直接给<a>加类（更简洁）：

<a href="" class="button">enter</a>
<!-- 开发者信息链接可放在此处 -->

方法2：Grid布局（更简洁的现代方案） #

用Grid只需一行代码即可实现双方向居中，代码量更少：

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center; /* 同时实现水平+垂直居中 */
}

.button {
  /* 保留你原有的按钮样式 */
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
}

方法3：绝对定位+Transform（兼容老浏览器） #

如果需要兼容IE等老版本浏览器，可采用绝对定位方案：

body {
  margin: 0;
  min-height: 100vh;
  position: relative; /* 让子元素的绝对定位基于body */
}

.button {
  background-color: rgb(168, 229, 70);
  width: 200px;
  font-size: 20px;
  padding: 5px;
  border-radius: 5px;
  border: 3px solid yellow;
  color: white;
  text-align: center;
  /* 添加居中属性 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 基于自身尺寸偏移，实现精准居中 */
}

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