如何高效实现表格在页面的完全居中（含垂直对齐）

你的现有代码存在核心问题：将<table>元素设置为display: table-cell会破坏表格本身的结构，且该属性无法实现页面级的垂直居中效果。以下是几种高效且靠谱的实现方案：

方法一：Flexbox布局（推荐） #

这是现代浏览器最常用的方案，代码简洁、兼容性好，无需复杂计算。

CSS代码 #

/* 让根容器占满整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
  /* 用flex实现全局居中 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

#textcenter {
  background-color: #DCDCDC;
  border-radius: 25px;
  border-collapse: separate; /* 确保border-radius生效 */
}

HTML代码 #

<table id="textcenter">
  <tr>
    <th>Hello</th>
  </tr>
</table>

方法二：Grid布局 #

和Flexbox逻辑类似，代码更精简，适合现代前端场景：

CSS代码 #

html, body {
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center; /* 一行代码实现水平+垂直居中 */
}

#textcenter {
  background-color: #DCDCDC;
  border-radius: 25px;
  border-collapse: separate;
}

HTML代码 #

与Flexbox方案的HTML代码完全一致。

方法三：传统定位方案（兼容旧浏览器） #

如果需要兼容IE等老旧浏览器，可以采用绝对定位+位移的方式：

CSS代码 #

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

#textcenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 通过自身偏移实现精准居中 */
  background-color: #DCDCDC;
  border-radius: 25px;
  border-collapse: separate;
}

HTML代码 #

同上。

关键注意点 #

• 不要修改<table>的默认display属性，保持table特性才能正常渲染表格结构。
• 添加border-collapse: separate是为了让表格的border-radius生效，默认的collapse会覆盖圆角样式。

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