在HTML中实现`div`内文字居中，可通过以下几种方法实现，具体选择取决于布局需求和兼容性要求：
一、使用外边距（Margin）属性
经典方法 给`div`添加`margin: 0 auto；`，通过设置左右外边距为`auto`实现水平居中。此方法适用于已知父元素宽度的场景。
```html
居中内容
```
动态宽度场景
若`div`宽度为动态内容（如响应式设计），可结合父元素宽度计算左右外边距：
```css
.dynamic-center {
width: 50%;
margin-left: calc(50% - 50px); /* 父元素宽度的一半减去元素自身宽度的一半 */
margin-top: 20px; /* 垂直居中（需配合其他布局） */
}
```
二、使用Flexbox布局
简单实现
将`div`的`display`属性设为`flex`，并使用`justify-content: center`实现水平居中，配合`align-items: center`实现垂直居中。
```html
居中内容
```
嵌套Flexbox
对于复杂布局，可嵌套使用Flexbox实现多元素居中。
三、使用文本对齐（Text Align）
适用于 行内元素（如`span`、`img`）的居中，需将父元素的`text-align`设为`center`。
```html
居中文本
```
四、其他方法
绝对定位（Positioning）
通过`position: absolute；`结合`top: 50%； left: 50%；`实现居中，需设置`margin-top`和`margin-left`为`-50%`（元素宽度的一半）。
```css
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
margin-top: -100px; /* 元素高度的一半 */
margin-left: -100px;
}
```
CSS Grid布局
适用于复杂页面布局，通过`grid-template-columns: center；`实现水平居中。
总结
水平居中： 优先使用`margin: auto`（推荐）或Flexbox（兼容性更好）； 垂直居中
行内元素：使用`text-align: center`。
根据具体需求选择方法，注意不同方法对浏览器兼容性的影响。
