HTML5如何居中文字？

水平居中

行内元素（如 <span>、<a>）

.container { text-align: center; /* 父级容器添加该属性 */ }

原理：通过父容器的 text-align: center 控制内部行内内容居中。

块级元素（如 <div>、<p>）

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

注意：块级元素需明确宽度（非100%），否则无法生效。

垂直居中

单行文本

.container { height: 100px; /* 容器需有固定高度 */ line-height: 100px; /* 行高等于容器高度 */ }

多行文本

Flexbox布局（推荐）

.container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ height: 200px; /* 需设置高度 */ }

Grid布局

.container { display: grid; place-items: center; /* 水平+垂直居中 */ height: 200px; }

绝对定位（兼容旧浏览器）

.container { position: relative; height: 200px; } .text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 偏移自身宽高的50% */ }

水平+垂直居中

最佳实践：Flexbox

<div class="container"> <p>任意内容居中</p> </div> <style> .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ min-height: 300px; /* 最小高度保证容器可见 */ } </style>

替代方案：Grid

.container { display: grid; place-items: center; /* 一行代码实现双向居中 */ }

特殊场景方案

表格单元格居中

td, th { text-align: center; /* 水平 */ vertical-align: middle; /* 垂直 */ }

浮动元素居中

.float-element { float: left; position: relative; left: 50%; transform: translateX(-50%); /* 反向偏移 */ }

响应式注意事项

• 使用相对单位（如 、rem）替代固定像素值。
• 结合媒体查询调整居中样式： @media (max-width: 768px) { .container { text-align: left; /* 小屏幕左对齐 */ } }

总结建议

1. 现代方案：优先使用 Flexbox 或 Grid（兼容主流浏览器）。
2. 传统方案：text-align + line-height 适合简单文本。
3. ：绝对定位 + transform 适应未知宽高元素。
4. 语义化：始终用HTML描述内容结构，CSS控制样式。

权威参考：

• MDN Web Docs：Flexbox布局
• W3C CSS规范：文本居中
• CSS Tricks：居中完全指南