HTML中section内容无法居中？使用display:grid仍未解决的问题排查

核心问题：CSS语法错误导致section样式失效 #

你的@keyframes example定义缺少闭合的}，这会让浏览器直接忽略后续所有CSS规则——包括你写的section居中样式。这是section无法居中的根本原因。

次要问题：HTML结构与细节错误 #

• 出现重复的<body>标签，且</head>错误放置在<body>之后，导致浏览器DOM解析异常，影响布局渲染。
• 页面顶部的<h1>Hi</h1>不在section内，会占据上方空间，干扰你对section垂直居中的视觉判断。
• 部分CSS属性值不规范：比如background-color: none应改为transparent，内联样式里多写了冗余分号。

修复后的完整代码 #

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap');
html, body {
  background: #0E1212;
  font-family: 'Roboto Mono', monospace;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  font-family: 'Roboto Mono', monospace;
}

li {
  float: left;
}

li a {
  display: block;
  color: #DBDBDB;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: #622cd8;
  transition: 0.5s;
  animation-name: example;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.active {
  color: #808080;
}

.active:hover {
  color: #808080;
  animation-name: active;
}

@keyframes active {
  0% {
    color: #808080;
  }
  100% {
    color: #808080;
  }
}
 
@keyframes example {
  0% {
    color: #DBDBDB;
  }
  100% {
    color: #622cd8;
  }
}

section {
  display: grid;
  place-content: center;
  min-height: 100vh;
  text-align: center;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>
  <ul id='menu'>
    <li><a class="active" href="#home" id="home">.home()</a></li>
    <li><a class="inactive" href="#news">.about()</a></li>
    <li><a class="inactive" href="#contact">.stuffs()</a></li>
    <li><a class="inactive" href="#about">.apply()</a></li>
  </ul>
  
  <section class="hidden">
    <h1 style="color:#622cd8;">welcome</h1>
    <p>this is my website</p>
  </section>
</body>
</html>

新手进阶建议 #

1. 启用编辑器语法提示：用VS Code等工具，它会实时标记未闭合的大括号、错误属性值等问题，避免低级语法错误。
2. 规范HTML结构：每个页面只能有1个<html>、<head>、<body>标签，养成标签正确嵌套的习惯。
3. 减少内联样式：把内联的颜色、字体等样式移到CSS文件中，用类选择器或元素选择器统一控制，方便后续修改维护。
4. 临时边框调试：布局遇到问题时，给目标元素加border: 1px solid red，能直观看到元素的实际范围，快速判断是否真的居中。

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