CSS 文字与图片居中是一个常见的需求，可以通过多种方法实现，一种简单的方法是使用 CSS 的text-align属性将文字水平居中，然后使用display: flex和justify-content: center将图片垂直居中，对于一段文字和一张图片，可以这样设置：，``css，.container {， display: flex;， flex-direction: column;， justify-content: center;， align-items: center;， height: 100vh; /* 使容器高度占满视口 */，}，`，在 HTML 中，将文字和图片放入一个具有上述类的容器中：，`html，， 这是一段文字。， ，，``，这样，文字和图片就会在容器中水平和垂直居中，还可以根据需要调整容器的样式，例如设置背景颜色、边距等，以适应不同的布局需求。
CSS实现文字与图片居中技巧
在网页设计中，文字与图片的布局与排版至关重要，如何将文字与图片完美地居中，不仅能够提升网页的美观度，还能增强用户体验，本文将介绍几种CSS实现文字与图片居中的技巧,帮助大家快速掌握这一技能。
使用Flexbox实现文字与图片居中
Flexbox（弹性盒子布局）是一种非常强大的布局工具，可以轻松实现文字与图片的居中对齐,以下是一个简单的示例：
HTML代码：
<div class="container"> <img src="image.jpg" alt="图片"> <p>这是一段文字</p> </div>
CSS代码：
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px; /* 设置容器高度 */
}
在上述代码中，我们将容器的display属性设置为flex，然后使用justify-content和align-items属性将文字与图片在水平和垂直方向上居中对齐。
使用Grid实现文字与图片居中
CSS Grid（网格布局）是另一种强大的布局工具，也可以轻松实现文字与图片的居中对齐,以下是一个简单的示例：
HTML代码：
<div class="container"> <img src="image.jpg" alt="图片"> <p>这是一段文字</p> </div>
CSS代码：
.container {
display: grid;
place-items: center;
height: 200px; /* 设置容器高度 */
}
在上述代码中，我们将容器的display属性设置为grid，然后使用place-items属性将文字与图片在水平和垂直方向上居中对齐。
使用绝对定位实现文字与图片居中
绝对定位是一种比较传统的方法，也可以实现文字与图片的居中对齐,以下是一个简单的示例：
HTML代码：
<div class="container"> <img src="image.jpg" alt="图片"> <p>这是一段文字</p> </div>
CSS代码：
.container {
position: relative;
height: 200px; /* 设置容器高度 */
}
.container img,
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
在上述代码中，我们将容器的position属性设置为relative，然后将图片和文字的position属性设置为absolute,并使用transform属性将它们在水平和垂直方向上居中对齐。
本文介绍了三种CSS实现文字与图片居中的技巧，包括使用Flexbox、Grid和绝对定位，通过这些技巧，我们可以轻松地实现文字与图片的居中对齐，提升网页的美观度和用户体验,希望本文对大家有所帮助！
