如何使用CSS实现HTML元素在父容器内的水平与垂直双向居中

首先纠正你现有代码的拼写错误：.wrapper属性中的heigth为拼写错误，正确写法是height，这会导致父容器高度不生效，优先修正该问题。

下面是几种成熟的实现方案： #

方案1：Flex布局（最常用，兼容性好） #

直接给父容器添加Flex相关属性即可，无需修改子元素样式，不限制子元素宽高：

.wrapper {
  height: 10rem;
  width: 100%;
  background-color: black;
  /* 新增以下3行 */
  display: flex;
  justify-content: center; /* 控制水平居中 */
  align-items: center; /* 控制垂直居中 */
}

.element {
  padding: 0.25rem 0.5rem;
  color: white;
  border: 1px solid white;
}

方案2：Grid布局（代码最简洁） #

Grid布局仅需给父容器加两行属性即可实现双方向居中：

.wrapper {
  height: 10rem;
  width: 100%;
  background-color: black;
  /* 新增以下2行 */
  display: grid;
  place-items: center; /* 同时控制水平、垂直两个方向居中 */
}

.element {
  padding: 0.25rem 0.5rem;
  color: white;
  border: 1px solid white;
}

方案3：绝对定位+transform #

适合需要兼容低版本浏览器的场景，不需要提前知道子元素尺寸：

.wrapper {
  height: 10rem;
  width: 100%;
  background-color: black;
  /* 新增1行 */
  position: relative;
}

.element {
  padding: 0.25rem 0.5rem;
  color: white;
  border: 1px solid white;
  /* 新增以下4行 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方案4：行高+行内块（仅适合父容器高度固定的场景） #

如果不想修改原有布局模式，也可以用传统行高方案实现：

.wrapper {
  height: 10rem;
  width: 100%;
  background-color: black;
  text-align: center;
  /* 新增1行，行高和父容器高度保持一致 */
  line-height: 10rem;
}

.element {
  padding: 0.25rem 0.5rem;
  color: white;
  border: 1px solid white;
  /* 新增以下3行 */
  display: inline-block;
  vertical-align: middle;
  line-height: 1.5; /* 重置子元素行高，避免内部多行文本溢出 */
}

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