CSS可以通过多种方式实现图片和文字的垂直居中。一种常见的方法是使用flexbox布局。可以设置父容器为flex布局，然后使用align-items属性将子元素（图片和文字）垂直居中。另一种方法是使用CSS Grid布局，通过设定行和列的垂直居中属性来实现。还可以使用定位方法，如相对定位和绝对定位，结合transform属性进行微调。这些方法都可以实现图片和文字的垂直居中，具体使用哪种方法取决于布局需求和浏览器兼容性要求。
本文目录导读：
在网页设计中，我们经常需要将图片和文字垂直居中，以提供更好的用户体验和视觉效果，CSS（层叠样式表）为我们提供了多种方法来实现这一目标，本文将详细介绍如何使用CSS将图片和文字垂直居中。
二、使用CSS Flexbox布局实现垂直居中
Flexbox是CSS3中的一个强大布局工具，可以轻松实现元素在容器内的垂直居中，以下是一个简单的示例：
HTML结构：
<div class="container"> <img src="image.jpg" alt="示例图片"> <p>这是一段示例文字</p> </div>
CSS样式：
.container {
display: flex;
flex-direction: column;
justify-content: center; /* 使内容在垂直方向上居中 */
height: 100vh; /* 设置容器高度为视窗高度，确保内容在整个页面中居中 */
}在这个例子中，我们使用了Flexbox的justify-content属性来实现垂直居中，通过设置容器的display属性为flex，并设置flex-direction为column，我们可以沿着垂直轴线对齐内容，使用justify-content: center垂直居中，为了确保内容在整个页面中居中，我们将容器的高度设置为视窗高度（100vh）。
使用CSS Grid布局实现垂直居中
CSS Grid布局是另一个强大的布局工具，同样可以实现元素的垂直居中，以下是一个使用Grid布局的示例：
HTML结构：
<div class="grid-container">
<div class="grid-item">
<img src="image.jpg" alt="示例图片">
</div>
<div class="grid-item">
<p>这是一段示例文字</p>
</div>
</div>CSS样式：
.grid-container {
display: grid;
place-items: center; /* 在水平和垂直方向上居中对齐内容 */
height: 100vh; /* 设置容器高度为视窗高度 */
}在这个例子中，我们使用了Grid布局的place-items属性来实现内容的垂直居中，通过设置容器的display属性为grid，并使用place-items: center，我们可以在水平和垂直方向上居中对齐内容，同样地，为了确保内容在整个页面中居中，我们将容器的高度设置为视窗高度，需要注意的是，在使用Grid布局时，我们可以将图片和文字分别放在不同的网格单元中，以实现更灵活的布局，四、使用CSS定位和transform属性实现垂直居中除了使用Flexbox和Grid布局外，我们还可以使用CSS定位和transform属性来实现元素的垂直居中，这种方法适用于需要将元素相对于某个特定元素进行垂直居中的情况，以下是一个示例：HTML结构：<div class="container"><div class="centered"><img src="image.jpg" alt="示例图片"><p>这是一段示例文字</p></div></div>CSS样式：.container {position: relative; /相对定位容器 */}.centered {position: absolute; /* 相对容器进行定位 */top: 50%; /* 将元素顶部置于容器中心 */transform: translateY(-50%); /* 通过transform属性向上移动元素自身高度的50%，实现垂直居中 */}在这个例子中，我们将容器设置为相对定位（relative），然后将要居中的元素设置为绝对定位（absolute），通过将元素的顶部（top）设置为容器的中心（50%），我们可以将元素的顶部置于容器中心，我们使用transform属性的translateY函数，向上移动元素自身高度的50%，从而实现垂直居中，需要注意的是，这种方法需要手动设置元素的高度和容器的相应高度，以确保正确的对齐效果，五、总结本文介绍了三种使用CSS实现图片和文字垂直居中的方法使用Flexbox布局、使用Grid布局以及使用定位和transform属性，每种方法都有其适用的场景和优缺点，在实际应用中，我们可以根据具体需求和布局要求选择合适的方法来实现垂直居中效果，希望本文能够帮助你更好地理解和应用CSS中的垂直居中技术。