css 图片 文字 垂直居中显示

在网页设计过程中，经常会遇到需要将图片和文字垂直居中显示的需求。使用CSS可以轻松实现这一效果。

首先，我们来看如何将图片垂直居中显示。通常情况下，图片都是作为背景图像添加到HTML元素中的，因此可以使用background属性来实现垂直居中显示。下面是示例代码：

.container {
  background: url("image.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

在上述代码中，display:flex和align-items:center的作用是将容器的子元素垂直居中显示，justify-content:center的作用是将子元素水平居中显示。

接下来，我们来看如何将文字垂直居中显示。在HTML元素中使用line-height属性可以轻松实现这一效果。下面是示例代码：

.container p {
  font-size: 28px;
  line-height: 400px;
}

在上述代码中，line-height的值等于容器的高度，因此文字垂直居中显示。

当然，如果想将文字和图片同时垂直居中显示，只需要将上述两种方法结合起来即可。

总之，使用CSS可以轻松地实现图片和文字的垂直居中显示，能够使网页内的元素更加美观和易读。