最常用方法是使用CSS实现div内文本居中。1. 水平居中用text-align: center；2. 单行垂直居中设置line-height等于容器高度；3. 推荐Flex布局，通过display: flex、justify-content: center和align-items: center实现水平垂直居中；4. 也可使用Grid布局，配合place-items: center简洁完成居中。根据需求选择合适方式，兼顾兼容性与灵活性。
让HTML文本在div中居中显示，最常用的方法是使用CSS控制文本的对齐方式。下面介绍几种简单有效的方式，帮助你快速实现水平居中、垂直居中或同时居中。
1. 水平居中文本
要使文本在div内水平居中，只需设置CSS的text-align: center;属性。
示例代码：
<div style="text-align: center;">
这是一段居中的文字
</div>
适用于块级容器内的行内内容（如文字、图片等），是最简单且兼容性好的方法。
2. 垂直居中文本（单行）
对于单行文本，可以通过设置line-height等于div的高度来实现垂直居中。
立即学习“前端免费学习笔记（深入）”；
示例代码：
<div style="height: 50px; line-height: 50px; text-align: center;">
居中的单行文字
</div>
注意：line-height的值需与容器高度一致，适合固定高度的场景。
3. 水平垂直都居中（推荐Flex布局）
使用Flexbox可以轻松实现文本在div中完全居中，无论文本行数多少。
示例代码：
<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
完全居中的文字
</div>
- justify-content: center; —— 水平居中
- align-items: center; —— 垂直居中
这种方法灵活、现代，适合响应式布局。
4. 使用网格布局（Grid）
CSS Grid也能实现居中，适用于复杂布局场景。
示例代码：
<div style="display: grid; place-items: center; height: 100px;">
居中文字
</div>
place-items: center; 简洁地实现了内容在两个方向上的居中。
基本上就这些。根据实际需求选择合适的方法：简单居中用text-align，单行文本可用line-height，推荐使用Flex布局实现更灵活的居中效果。不复杂但容易忽略细节，比如容器是否有固定高度或是否需要兼容老浏览器。
