HTML5元素居中如何实现？

水平居中方案

行内/行内块元素：text-align: center

<div style="text-align: center;">
  <span>行内文本居中</span>
  <img src="icon.png" style="display: inline-block;">
</div>

原理：父容器设置text-align: center，作用于内部行内或inline-block元素。

块级元素：margin: 0 auto

.block {
  width: 80%;    /* 必须定义宽度 */
  margin: 0 auto; /* 左右外边距自适应 */
}

要求：元素需为block且设置明确宽度。

Flexbox弹性布局

.parent {
  display: flex;
  justify-content: center; /* 主轴（默认横向）居中 */
}

优势：无需子元素设置宽度，响应式友好。

Grid网格布局

.parent {
  display: grid;
  place-items: center; /* 单项目居中 */
  /* 或 */
  justify-content: center; /* 网格整体水平居中 */
}

垂直居中方案

单行文本：line-height

.container {
  height: 100px;
  line-height: 100px; /* 值等于容器高度 */
}

限制：仅适用于单行文本。

表格单元格特性

.parent {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  height: 200px;
}

Flexbox弹性布局

.parent {
  display: flex;
  align-items: center; /* 交叉轴（默认纵向）居中 */
}

绝对定位 + transform

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 反向偏移自身高度50% */
}

优势：不依赖具体高度，适用于未知高度元素。

水平垂直双方向居中

Flexbox终极方案

.parent {
  display: flex;
  justify-content: center; /* 主轴居中 */
  align-items: center;     /* 交叉轴居中 */
}

Grid一键居中

.parent {
  display: grid;
  place-items: center; /* 同时实现水平垂直居中 */
}

绝对定位 + 负边距

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-top: -50px;  /* 高度的一半 */
  margin-left: -100px; /* 宽度的一半 */
}

注意：需明确知道子元素宽高。

绝对定位 + transform

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 自适应宽高 */
}

最佳实践：兼容未知尺寸元素，现代浏览器首选。

方法选择建议

关键提示：Flexbox和Grid是CSS3现代布局标准，兼容IE10+，传统项目若需支持老旧浏览器，建议结合auto边距或定位方案。

引用说明参考MDN Web文档的CSS布局指南、W3C官方CSS规范以及Google Web Fundamentals最佳实践，并结合前端社区广泛验证的解决方案，技术细节均遵循W3C标准，确保代码规范性与浏览器兼容性。