如何将HTML表单居中显示在页面正中央

你之前居中失效的核心原因是没有给页面根元素设置满屏高度，同时父容器未配置居中属性，以下是三种可直接使用的实现方案：

方案1：Flex布局（推荐，兼容性好，实现简单） #

在你的search.css文件中写入以下代码即可生效：

/* 先让html和body占满整个视口高度，清除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 给body设置flex布局，直接让子元素水平垂直居中 */
body {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 可选样式，让表单内部元素对齐更美观，不需要可删除 */
form {
  text-align: center;
}
#search {
  margin-bottom: 12px;
  padding: 6px 10px;
  width: 300px;
}
#button {
  padding: 6px 16px;
}

方案2：Grid布局（代码更简洁，现代浏览器均支持） #

html, body {
  height: 100%;
  margin: 0;
}
body {
  display: grid;
  place-items: center; /* 一行代码实现水平垂直居中 */
}
form {
  text-align: center;
}

方案3：定位+transform（兼容IE9及以上老旧浏览器） #

html, body {
  height: 100%;
  margin: 0;
  position: relative;
}
form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

注意事项 #

你HTML中包裹form的无类名div如果没有其他用途可以直接删除，不影响居中效果。如果需要保留该div，只需把上述CSS中作用在body的flex/grid属性转移到该div上，同时给div设置height: 100%即可。

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