当想要将图片垂直居中显示时,我们可以用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 的值为图片自身宽高的一半(这里的图片宽高是已知的)。
以上是两种实现图片垂直居中的方法。具体应用时可以根据情况选择不同方案。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:css实现的让图片垂直居中的方法 - Python技术站