如何将id为innerDivision的内层div垂直居中于外层outerDivision容器中

以下是针对outerDivision包裹innerDivision的场景，实现内层div垂直居中的几种可靠方案：

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

Flexbox是现代浏览器最常用的布局方案，代码简洁且兼容性好（支持IE11+）。

<div id="outerDivision">
  <div id="innerDivision">我是内层内容</div>
</div>

#outerDivision {
  display: flex;
  align-items: center; /* 实现垂直居中 */
  height: 300px; /* 必须给外层设置高度，否则外层高度由内容撑开，居中无意义 */
  border: 1px solid #ccc; /* 方便查看效果，可按需删除 */
}

#innerDivision {
  padding: 10px;
  background: #f0f0f0; /* 自定义样式，可按需调整 */
}

若需同时实现水平居中，给外层添加justify-content: center;即可。

方法2：Grid布局 #

Grid布局是更直观的现代布局方案，支持IE10+（部分属性需加前缀）。

#outerDivision {
  display: grid;
  align-items: center; /* 单独实现垂直居中 */
  height: 300px;
  border: 1px solid #ccc;
}

#innerDivision {
  padding: 10px;
  background: #f0f0f0;
}

如果要同时水平+垂直居中，直接替换为place-items: center;即可。

方法3：绝对定位 + transform #

适合需要兼容较老浏览器（IE9+）的场景，无需修改HTML结构。

#outerDivision {
  position: relative;
  height: 300px;
  border: 1px solid #ccc;
}

#innerDivision {
  position: absolute;
  top: 50%; /* 相对于外层顶部偏移50% */
  transform: translateY(-50%); /* 自身向上偏移50%高度，实现垂直居中 */
  padding: 10px;
  background: #f0f0f0;
}

需同时水平居中的话，添加left: 50%; transform: translate(-50%, -50%);即可。

方法4：表格布局法 #

兼容所有浏览器（包括IE8及以下），属于老式布局逻辑。

#outerDivision {
  display: table;
  width: 100%; /* 可选，根据需求设置宽度 */
  height: 300px;
  border: 1px solid #ccc;
}

#innerDivision {
  display: table-cell;
  vertical-align: middle; /* 实现垂直居中 */
  padding: 10px;
  background: #f0f0f0;
}

这种方式下内层div会被当作表格单元格处理，若需保留内层块级特性，可在innerDivision内部再嵌套一层元素。

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