HTML5 中让一个元素居中，核心思路是根据元素类型和居中需求选择合适的方法。下面按场景分类说明。html5中，可以混写html4中的标记和属性，例如<center>，浏览器自适应。
一、水平居中
1. 行内元素 / 文本居中：text-align: center
适用于 <span>、<a>、<img> 等行内元素，或让文字在容器内居中。
html
<div style="text-align: center;">
    <span>这段文字居中显示</span>
</div>
2. 块级元素居中：margin: 0 auto
适用于 <div>、<table>、<form> 等块级元素。必须设置宽度，否则元素默认撑满父容器，居中无效。
html
<div style="width: 300px; margin: 0 auto;">
    这个 div 水平居中
</div>
二、垂直居中
1. 单行文本：line-height 等于 height
html
<div style="height: 100px; line-height: 100px; text-align: center;">
    单行文本垂直居中
</div>
2. 多行内容：display: table-cell
html
<div style="display: table-cell; vertical-align: middle; height: 200px; width: 300px;">
    多行内容垂直居中
</div>
三、水平 + 垂直同时居中（最常用）
1. Flexbox（推荐，最简洁）
html
<div style="display: flex; justify-content: center; align-items: center; height: 300px;">
    <div>完美居中</div>
</div>
2. Grid（一行搞定）
html
<div style="display: grid; place-items: center; height: 300px;">
    <div>完美居中</div>
</div>
3. 绝对定位 + transform
html
<div style="position: relative; height: 300px;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        完美居中
    </div>
</div>
四、方法速查表
表格
场景 推荐方法 关键点
文字/行内元素水平居中 text-align: center 设在父容器上
块级元素水平居中 margin: 0 auto 必须设宽度
水平+垂直居中 Flexbox 或 Grid 父容器需有高度
弹窗/浮层居中 绝对定位 + transform 脱离文档流
单行文本垂直居中 line-height = height 仅限单行
五、注意事项
<center> 标签和 align="center" 属性已在 HTML5 中废弃，不要使用，统一用 CSS 实现。
Flexbox 和 Grid 需要父容器有明确的高度，垂直居中才能生效。
日常开发中，Flexbox 是最万能的方案，绝大多数居中需求用它都能搞定。