嘿，我来帮你搞定这个垂直居中的坑！你之前尝试的vertical-align: middle和margin: auto 0没生效，其实是没摸准这两个属性的生效条件，我给你拆解清楚，再给几个实用的解决方案：

为什么你的方法没起作用？ #

1. vertical-align: middle的局限 #

这个属性可不是给块级父容器随便加就能生效的！它只对行内元素、行内块元素、表格单元格元素起作用。如果你的父容器是普通块级元素，直接加vertical-align: middle完全没用；就算给子元素加，要是子元素是块级，同样不生效。

2. margin: auto 0的无效原因 #

在常规的文档流里，垂直方向的margin: auto是不会生效的！浏览器只会在水平方向分配auto的margin来实现居中，垂直方向的空间是由内容和文档流自动计算的，不会给上下margin分配auto值。

靠谱的解决方案（按推荐程度排序） #

方案1：Flexbox布局（最推荐） #

这是现在实现居中最省心的方法，代码简洁，兼容性拉满，不管子元素是啥类型、有没有固定高度都能搞定：

先给你的全屏父容器加这些样式：

.fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center; /* 核心：垂直居中 */
  justify-content: center; /* 可选：加上就水平也居中 */
}

子元素不需要加任何额外样式，直接就能居中，完美解决问题！

方案2：Grid布局（更简洁） #

和Flexbox一样好用，甚至代码更短，一行实现垂直+水平居中：

.fullscreen {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center; /* 同时搞定垂直和水平居中 */
}

方案3：表格布局（兼容性极强） #

如果需要兼容非常老的浏览器（比如IE8），可以用这个方法：

.fullscreen {
  width: 100vw;
  height: 100vh;
  display: table; /* 把父容器变成表格 */
}
.children {
  display: table-cell; /* 把子元素变成表格单元格 */
  vertical-align: middle; /* 现在这个属性就生效了！ */
  text-align: center; /* 可选：水平居中 */
}

方案4：绝对定位+Transform（特殊场景用） #

如果不想改变父容器的display属性，可以用这个方法，不过子元素会脱离文档流，适合单独居中某个元素的场景：

.fullscreen {
  width: 100vw;
  height: 100vh;
  position: relative; /* 父容器设为相对定位 */
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 把元素拉回正中心 */
}

结合你的代码示例 #

结合你给出的代码片段，完整的Flexbox版本大概是这样：

body { margin: 0; padding: 0; }
h1 { margin: 0; font-size: 50px; }
.btn { border: 4px solid #079992; padding: 2px 15px; }

/* 全屏父容器 */
.fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 加个背景色方便看效果 */
  background-color: #f5f5f5;
}

对应的HTML结构参考：

<div class="fullscreen">
  <div class="children">
    <h1>我是居中的标题</h1>
    <button class="btn">点击按钮</button>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Jeffrey Cao WatsYourPowerLvl