在设计网站页面时，经常会用到图片，而如何在HTML中使用CSS居中图片，是前端开发中比较基础的操作。本文将从多个方面介绍如何实现图片居中。
一、使用text-align属性实现水平居中
实现图片水平居中最常用的方法是使用text-align属性，将图片所在的父元素的text-align属性设为center即可实现图片水平居中。
<style>
.img-box {
text-align: center;
}
</style>
<body>
<div class="img-box">
<img src="image.jpg">
</div>
</body>
代码中，.img-box为图片所在的父元素，将其text-align属性设为center，即可让图片在该元素中水平居中。
二、使用display: flex 和 justify-content属性实现水平居中
在CSS3中引入了flex布局，可以方便地实现居中效果。使用display: flex和justify-content属性，可以实现图片在父元素中的水平居中。
<style>
.img-box {
display: flex;
justify-content: center;
}
</style>
<body>
<div class="img-box">
<img src="image.jpg">
</div>
</body>
代码中，.img-box为图片所在的父元素，将其display属性设为flex，将justify-content属性设为center即可让图片在该元素中水平居中。
三、使用margin实现垂直居中
让图片在父元素中垂直居中，可以使用margin属性。
<style>
.img-box {
height: 300px; /* 父元素高度 */
display: flex;
justify-content: center;
align-items: center;
}
.img-box img {
margin-top: -50px; /* 图片高度的一半 */
}
</style>
<body>
<div class="img-box">
<img src="image.jpg" height="100">
</div>
</body>
代码中，.img-box为图片所在的父元素，将其display属性设为flex，将justify-content属性设为center，将align-items属性设为center，即可让图片在该元素中水平、垂直居中。同时，将图片的margin-top属性设为图片高度的一半，即可让图片垂直居中。
四、使用绝对定位与transform属性实现居中
还可以使用绝对定位和transform属性来实现图片居中。将图片的position属性设为absolute，将top和left属性设为50%，即可将图片定位到父元素的中央位置。然后使用transform属性，将图片向上、向左移动图片自身宽度和高度的一半，即可实现图片在父元素中水平、垂直居中。
<style>
.img-box {
position: relative;
height: 300px; /* 父元素高度 */
}
.img-box img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="img-box">
<img src="image.jpg" width="200">
</div>
</body>
代码中，.img-box为图片所在的父元素，将其position属性设为relative，将图片的position属性设为absolute，将top和left属性设为50%，即可将图片定位到父元素的中央位置。然后使用transform属性，将图片向上、向左移动图片自身宽度和高度的一半，即可实现图片在父元素中水平、垂直居中。
以上是实现图片居中的几种方法，可以根据实际情况选择适合的方法。当然，也可以将以上方法进行组合，实现更加自由灵活的图片居中效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/157011.html
微信扫一扫 
支付宝扫一扫 