```markdown
CSS怎么让图片和文字水平居中
在网页布局中，我们经常需要将图片和文字水平居中对齐。下面我们将介绍几种常用的CSS方法来实现这个目标。
1. 使用text-align属性
最常见的方法之一是通过父元素的text-align属性将子元素居中。适用于包含文本或内联元素（如图片）的情况。
示例代码：
```html
这是一段文字
```
说明：
text-align: center;将div中的所有内联元素（水平方向）居中对齐，包括图片和文字。
2. 使用display: flex
Flexbox是一个现代的布局工具，非常适合用于居中元素。通过设置父元素为flex布局，我们可以轻松地将图片和文字水平居中。
示例代码：
```html
这是一段文字
```
说明：
display: flex;让父元素成为一个flex容器。justify-content: center;使子元素在水平方向上居中对齐。align-items: center;使子元素在垂直方向上居中对齐。
3. 使用margin: 0 auto
如果只需要将图片居中，并且该图片是块级元素（例如通过display: block设置），可以使用margin: 0 auto来实现水平居中。
示例代码：
html
<img src="image.jpg" alt="图片" style="display: block; margin: 0 auto;">
说明：
display: block;将图片设置为块级元素。margin: 0 auto;自动计算左右外边距，使图片居中。
4. 使用position: absolute和transform
如果需要更灵活的居中方法，可以使用position: absolute和transform属性。这个方法适用于需要精确定位的元素。
示例代码：
```html
这是一段文字
```
说明：
position: absolute;将图片和文字定位为绝对定位。left: 50%; top: 50%;将元素的左上角定位到父元素的中心。transform: translate(-50%, -50%);将元素自身偏移其宽高的50%，实现完全居中。
总结
不同的布局需求可以选择不同的居中方法。对于简单的文本和图片居中，可以使用text-align或margin: 0 auto，而对于更复杂的布局，flexbox和position属性提供了更大的灵活性。掌握这些技巧后，你就可以轻松地实现水平居中的效果。
```