在設計網站頁面時，經常會用到圖片，而如何在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/zh-tw/n/157011.html
微信掃一掃 
支付寶掃一掃 