许多开发人员在处理图片时会遇到困难。处理响应式和对齐特别困难,尤其是将图片居中在页面中间。
因此,在这篇文章中,我将展示一些使用不同 CSS 属性在垂直和水平方向上居中图片的最常用方法。
我已经在上一篇文章中介绍了 CSS 定位和显示的属性。如果你不熟悉这些属性,建议你在阅读本文之前先查看这些文章。
水平定位一张图片
我们先使用 3 个不同的 CSS 属性将图片水平居中。
Text-Align
使图片水平居中的第一种方法是使用 text-align
属性。但是,仅当图片位于块级容器(例如 <div>
)中时,此方法才有效:
<style>
div {
text-align: center;
}
</style>
<div>
<img src="your-image.jpg">
</div>
Margin: Auto
使图片居中的另一种方法是使用 margin: auto
属性(用于左边距和右边距)。
但是,单独使用 margin: auto
将不会生效。 如果需要使用 margin: auto
,则还必须使用 2 个其他属性。
margin-auto 属性对内联级别的元素没有任何影响。由于 <img>
标签是一个内联元素,因此我们需要先将其转换为块级元素:
img {
margin: auto;
display: block;
}
其次,我们还需要定义宽度。因此,左边距和右边距可以占用其余的空白空间,并自动对齐,这可以解决问题(除非我们将宽度设置为 100%):
img {
width: 60%;
margin: auto;
display: block;
}
Display: Flex
将图片水平居中的第三种方法是使用 display: flex
。就像我们对容器使用 text-align
属性一样,我们对容器也使用 display: flex
。
但是,仅使用 display: flex
是不够的。容器还必须有一个 justify-content
属性:
div {
display: flex;
justify-content: center;
}
img {
width: 60%;
}
justify-content
属性与 display: flex
一起使用,可以水平对齐图片。
最后,图片的宽度必须小于容器的宽度,否则,它将占用 100% 的空间,然后我们就无法将其居中。
重要提示:较旧版本的浏览器不支持 display: flex
属性。请点击这里查看更多详细信息。
垂直居中图片
Display: Flex
对于垂直居中,使用 display: flex
非常方便。
考虑以下情况,我们的容器的高度为 800px,但是图片的高度仅为 500px:
div {
display: flex;
justify-content: center;
height: 800px;
}
img {
width: 60%;
height: 500px;
}
在这种情况下,向容器添加一行代码,align-items: center
,就可以了:
div {
display: flex;
justify-content: center;
align-items: center;
height: 800px;
}
align-items
和 display: flex
一起用,可以垂直定位属性。
定位:Absolute & Transform 属性
垂直对齐的另一种方法是一起使用 position
和 transform
属性。这个有点复杂,所以让我们一步一步地做。
1步骤 1:定义 Position Absolute
首先,我们修改将图片的定位方式从 static
修改为 absolute
:
div {
height: 800px;
position: relative;
background: red;
}
img {
width: 80%;
position: absolute;
}
它应该位于相对定位的容器内,因此我们相对于其容器 div 添加 position: relative
。
步骤 2:定义 Top & Left 属性
其次,我们定义图片的顶部和左侧属性,并将其设置为 50%。这会将图片的起点从左上角移到容器的中心:
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
}
步骤 3:定义 Transform 属性
但是第二步将图像部分移出了容器。因此,我们需要将其放回内部。
定义一个 transform
属性,并在其 X 和 Y 轴上添加 -50%,可以达到目的:
img {
width: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
还有其他方法可以使元素在水平和垂直方向上居中,但是我已经解释了最常见的方法。
希望本文能帮助你了解如何在页面中心对齐图片。
如果你想了解有关 Web 开发的更多信息,请随时访问我的 Youtube channel 以获取更多信息。
谢谢阅读!
原文:How to Center an Image Vertically and Horizontally with CSS,作者:Cem Eygi