大小不固定的图片、多行文字的水平垂直居中实现方法

实现大小不固定的图片水平垂直居中的方法有很多，下面将介绍其中两种比较常见的方法。

实现大小不固定的图片水平垂直居中的方法有很多，下面将介绍其中两种比较常见的方法。

方法一：使用flexbox

我们可以使用flexbox来实现大小不固定的图片水平垂直居中。

1. 首先，在图片容器上设置display属性为flex，使其成为一个flex布局容器。

2. 设置flex容器的align-items和justify-content属性均为center，使图片容器中的内容垂直居中并且水平居中。

以下是示意代码：

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

1. 在HTML中，我们需要将之前的图片元素包裹在一个容器中，并且给这个容器添加一个class为我们之前定义的 .image-container，比如：

<div class="image-container">
  <img src="path/to/image.jpg" alt="image" />
</div>

1. 这样就完成了大小不固定的图片水平垂直居中，可以自动适应不同图片大小。

方法二：使用position

另一种实现方法是使用CSS的position属性来定位图片。这种方法适用于多个元素需要水平垂直居中的情况，不仅仅是图片。

1. 在图片容器上设置position为relative，使其成为一个相对定位的容器。

2. 在图片元素上设置position为absolute，并设置top、left、bottom和right属性均为0，使其距离图片容器的上、下、左、右四个方向的距离都为0。这样就能将图片元素居中放置在图片容器中。

以下是示意代码：

.image-container {
  position: relative;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; /* 需要添加margin:auto来使图片水平居中 */
}

1. 在HTML中，我们仍然需要将图片元素包裹在一个容器中，并且给这个容器添加一个class为我们之前定义的 .image-container，比如：

<div class="image-container">
  <img class="image" src="path/to/image.jpg" alt="image" />
</div>

1. 这样就完成了大小不固定的图片水平垂直居中，可以自动适应不同图片大小。

实现多行文字的水平垂直居中

与图片不同，文字需要在父容器中居中，因此需要一些不同的CSS属性。

1. 在文字所在的容器上设置display属性为table，使其成为一个表格。

2. 在容器内部设置一个子元素，将这个子元素的显示方式设置为table-cell，并在子元素上设置垂直居中和水平居中的属性：vertical-align: middle 和 text-align: center。

以下是示意代码：

.text-container {
  display: table;
}
.text-container .content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

1. 在HTML中，我们需要将文字元素包裹在一个容器中，并且给这个容器添加一个class为我们之前定义的 .text-container，比如：

<div class="text-container">
  <p class="content">多行文字居中</p>
</div>

1. 这样就完成了多行文字的水平垂直居中。

示例说明：

示例一：

下面的示例展示的是使用Flexbox来实现大小不固定的图片的水平垂直居中。

<div class="image-container">
  <img src="https://www.gstatic.com/webp/gallery/4.jpg" alt="image" />
</div>

.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}
img {
  max-width: 100%;
  max-height: 100%;
}

其中，.image-container是图片容器的类名，这里使用了justify-content和align-items来使图片垂直、水平居中，max-width和max-height可以使图片保持原有比例。

示例二：

下面的示例展示的是使用position属性来实现大小不固定的图片的水平垂直居中。

<div class="image-container">
  <img class="image" src="https://www.gstatic.com/webp/gallery/4.jpg" alt="image"/>
</div>

.image-container {
  position: relative;
  text-align: center;
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

其中，.image-container是图片容器的类名，这里使用了position:relative和position:absolute来使图片垂直、水平居中，margin:auto可以使图片水平居中，max-width和max-height可以使图片保持原有比例。