艾Q网

标题: css实现的让图片垂直居中的方法 [打印本页]

作者: admin 时间: 2023-12-24 11:18
标题: css实现的让图片垂直居中的方法
当想要将图片垂直居中显示时，我们可以用CSS中的一些技巧来实现。下面是一些常见的方法：

方法 1：使用 Flex 布局
使用 display: flex 的父容器来垂直居中一个子元素。此方法可以在许多应用场景中使用。

HTML
<div class="parent">
  <img src="https://via.placeholder.com/150" alt="placeholder image">
</div>
CSS
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
在这个示例中，.parent 是一个包含了一个图片的容器。使用 display: flex 将此容器转换成为一个 Flex 的容器。接着通过 align-items 和 justify-content 两个属性将图片垂直和水平居中。

方法 2：使用 position 和负 margin
通过将图片的 position 设为 absolute 并使用 margin 将其垂直居中。

HTML
<div class="parent">
  <img src="https://via.placeholder.com/150" alt="placeholder image">
</div>
CSS
.parent {
  height: 200px;
  position: relative;
  border: 1px solid black;
}
.parent img {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
}
在这个示例中，.parent 是一个包含了一个图片的容器。使用 position: relative 将其 position 设为 relative，以便被其子元素图片参考。

同时也为了让图片的位置置于父元素的中心，给图片设置了 margin-top 和 margin-left 的值为图片自身宽高的一半（这里的图片宽高是已知的）。

以上是两种实现图片垂直居中的方法。具体应用时可以根据情况选择不同方案。

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)