HTML网页body垂直居中、主容器双列布局失效问题求助

问题根因 #

• 垂直居中未实现：html和body元素未设置全屏高度，也未配置居中布局规则，内容默认按普通文档流贴顶排列
• 双列布局失效：.mainbox的CSS规则未正确闭合，嵌套写在其内部的.column、.row样式属于语法错误，浏览器无法解析这部分规则；同时HTML结构中第一列的图片放在了.column容器外部，进一步导致布局错乱
• 附带语法问题：原代码存在.table1错误设置display: block、侧边栏缺失<ul>开标签、多余闭合</li>标签的问题，也会引发潜在布局异常

具体修复操作 #

1. 实现整体垂直居中
   给html、body设置100视口高度，通过flex布局实现内容垂直水平居中，重置默认边距：

html, body {
  min-height: 100vh;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 保留原有背景等自定义属性 */
}

2. 修复双列布局CSS语法错误
   把错误嵌套在.mainbox里的.column、.row规则移到外部，补全所有缺失的闭合大括号，添加盒模型规则避免内边距撑破列宽：

.mainbox {
  /* 保留原有背景、边框、宽高、内边距属性，补全闭合大括号，删除内部嵌套的错误样式 */
  box-sizing: border-box;
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: left;
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

3. 修复HTML结构错误
   把放在第一列.column外部的gif图片移入对应容器，补全缺失的标签闭合，清理多余错误标签。

修正后完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LAINWEB</title>
  <meta name="keywords" content="Neocities, HTML, aesthetic, web 1.0, old web, 90's, 80's, early 2000's,personal website,">
  <style>
    @font-face {
      font-family: hearts;
      src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf') format('truetype');
    }
    @font-face {
      src: url(https://dl.dropbox.com/s/7bidj4o8lc71b8u/Hantam.ttf);
      font-family: hantam;
    }
    html, body {
      min-height: 100vh;
      margin: 0;
    }
    html {
      font-size: 17px;
      line-height: 14px;
      font-family: "hearts";
      padding: 5px;
      cursor: url("/images/cursors/torocursor.png"), auto;
      scrollbar-color: #f48ee6 #fad1e8;
      box-sizing: border-box;
    }
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-image: url("https://lifted.crd.co/assets/images/gallery01/a307cfec.png?v=a0ae4590");
    }
    a {
      text-decoration: none;
      color: #ef8a85;
    }
    a:hover {
      cursor: url("/images/cursors/torocursorpoint.png"), auto;
      color: #00b2c5;
    }
    hr {
      border-top: solid 1px;
      border-color: #b6a898;
    }
    p {
      margin: 10px;
    }
    h1 {
      font-family: hantam;
      font-size: 30px;
      color: #F9A1CC;
      line-height: 18px;
      margin: 0px;
      font-weight: normal;
      text-align: center;
    }
    .table1 {
      margin-left: auto;
      margin-right: auto;
      border-spacing: 0px;
      border-collapse: collapse;
      width: 812px;
    }
    .table1 td {
      vertical-align: top;
      border: none;
      padding: 0px;
      position: relative;
    }
    .table1 tr {
      vertical-align: top;
      border: none;
      padding: 0px;
      position: relative;
    }
    .headbox {
      margin-left: auto;
      margin-right: auto;
      margin-top: 0px;
      border-radius: 4px;
      height: 80px;
      width: 800px;
      position: relative;
      padding: 10px;
    }
    .footbox {
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      width: 900px;
      padding: 0px;
      height: 100px;
      text-align: center;
    }
    .titleimg {
      margin-left: auto;
      margin-right: auto;
      display: block;
      position: absolute;
      bottom: -20px;
      left: -15px;
      z-index: 10;
    }
    .bar1 {
      background-color: #FFFFFF;
      border: 3px double #B1B1B1;
      border-radius: 4px;
      padding: 5px;
      padding-bottom:50px;
      width: 170px;
      min-height: 100px;
      margin-top: 7px;
      position: relative;
    }
    .mainbox {
      background-color: #FFFFFF;
      border: 3px double #B1B1B1;
      border-radius: 4px;
      padding: 20px;
      width: 570px;
      height: 400px;
      margin-left: 4px;
      margin-top: 7px;
      position: relative;
      box-sizing: border-box;
    }
    .row::after {
      content: "";
      display: table;
      clear: both;
    }
    .column {
      float: left;
      width: 50%;
      padding: 10px;
      box-sizing: border-box;
    }
    li {
      list-style: none;
      margin-bottom: 5px;
    }
    .hder {
      margin-left: -5px;
      border-top: 1px solid #b6a898;
      padding: 2px;
      list-style: none;
      width: 176px;
      font-family: "MS UI Gothic", Tahoma;
      font-weight: bold;
      margin-bottom: 5px;
      color: white;
    }
  </style>
</head>
<body>
  <table class="table1">
    <tr>
      <td>
        <div class="bar1">
          <ul>
            <li><a href="/about.html" target="framebox">about</a></li>
            <li><a href="/reading diary.html" target="framebox">reading diary</a></li>
            <li><a href="/music.html" target="framebox">music</a></li>
          </ul>
        </div>
      </td>
      <td>
        <div class="mainbox">
          <div class="row">
            <div class="column">
              <img src="https://barbara.crd.co/assets/images/gallery34/c3f48eed_original.gif?v=078d66a6">
            </div>
            <div class="column">
              <h2>Column 2</h2>
              <p>Some text..</p>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>
  <div class="footbox"></div>
</body>
</html>

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