请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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 的值为图片自身宽高的一半(这里的图片宽高是已知的)。

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

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。