无法通过多种方式实现div水平/垂直居中，求助解决方法

嘿，我明白你折腾这个垂直居中的痛苦——试了好几种方法都没搞定确实闹心！咱们先从你的代码入手，先把坑填上，再给你靠谱的实现方案。

首先，先修正你的HTML结构问题 #

你提供的HTML里有闭合错误：.lol这个div没有闭合，而且最外层的.center多了一个</div>，结构混乱会直接导致样式失效。修正后的HTML应该是这样：

<div class="center">
  <div class="lol">
    <h1 id="textual"></h1>
    <h1 id="author"></h1>
    <input type="submit" value="Click Me" id="cheese" class="button">
    <button type="submit" id="bttn">Submit</button>
  </div>
</div>

用Flexbox实现垂直居中（最推荐的现代方法） #

你说试过Flexbox但没成，大概率是父容器的样式没写全。要实现垂直居中，关键是给父容器设置Flex属性，同时确保父容器有足够的高度（比如占满整个视口）。

完整的CSS代码如下：

/* 先让html和body占满整个视口高度，避免父容器高度不够 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.center {
  /* 把父容器变成Flex容器 */
  display: flex;
  /* 垂直方向居中 */
  align-items: center;
  /* 水平方向居中（如果需要的话） */
  justify-content: center;
  /* 让父容器占满视口高度 */
  min-height: 100vh;
}

.lol {
  max-width: 700px;
  min-width: 700px;
  padding-left: 20px;
  padding-right: 20px;
  /* 可以加个边框方便看到效果 */
  border: 1px solid #ccc;
}

其他备选方案（针对不同场景） #

如果因为兼容性问题不能用Flex，也可以试试这两种方法：

方法1：Grid布局

和Flex一样简单，父容器设置Grid后直接居中：

html, body {
  height: 100%;
  margin: 0;
}

.center {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

方法2：绝对定位 + Transform

适合老浏览器场景：

html, body {
  height: 100%;
  margin: 0;
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

常见坑点排查 #

• 父容器没有高度：这是最容易犯的错！如果父容器高度只是内容高度，垂直居中根本看不出来，一定要给父容器设置min-height: 100vh或者height: 100%（记得html和body也要同步设置）。
• 结构嵌套错误：像你之前的HTML闭合错误，会导致浏览器解析异常，样式自然不生效。
• 子元素有浮动/绝对定位：如果子元素设置了float或者position: absolute，Flex/Grid的居中会失效，要先清除浮动或者调整定位属性。

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