HTML中让div居中显示的几种方法：使用Flexbox布局（推荐）：<divstyle="display:flex;justify-content:center;align-items:center;height:100vh;"><div>居中内容</div></div>使用CSSGrid布局：<divstyle="display:grid;
时间：2025-11-29 09:17:32 461浏览 收藏
“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《HTML文本在div中如何居中显示》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！
最常用方法是使用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;属性。
示例代码：
这是一段居中的文字
适用于块级容器内的行内内容（如文字、图片等），是最简单且兼容性好的方法。
2. 垂直居中文本（单行）
对于单行文本，可以通过设置line-height等于div的高度来实现垂直居中。
示例代码：
居中的单行文字
注意：line-height的值需与容器高度一致，适合固定高度的场景。
3. 水平垂直都居中（推荐Flex布局）
使用Flexbox可以轻松实现文本在div中完全居中，无论文本行数多少。
示例代码：
完全居中的文字
- justify-content: center; —— 水平居中
- align-items: center; —— 垂直居中
这种方法灵活、现代，适合响应式布局。
4. 使用网格布局（Grid）
CSS Grid也能实现居中，适用于复杂布局场景。
示例代码：
居中文字
place-items: center; 简洁地实现了内容在两个方向上的居中。
基本上就这些。根据实际需求选择合适的方法：简单居中用text-align，单行文本可用line-height，推荐使用Flex布局实现更灵活的居中效果。不复杂但容易忽略细节，比如容器是否有固定高度或是否需要兼容老浏览器。
好了，本文到此结束，带大家了解了《HTML中让div居中显示的几种方法：使用Flexbox布局（推荐）：
