在不同的布局场景下，让 <img> 元素居中的方法有所不同。下面为你介绍几种常见的居中方式
1. 块级元素下的水平居中
如果 <img> 元素是块级元素（可以通过 display: block 设置），可以使用 margin: 0 auto 来实现水平居中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平居中图片</title>
<style>
img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<img src="https://picsum.photos/200/300" alt="示例图片">
</body>
</html>2. 内联元素下的水平居中
如果 <img> 元素是内联元素，可将其父元素的 text-align 属性设置为 center 来实现水平居中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平居中图片</title>
<style>
.parent {
text-align: center;
}
</style>
</head>
<body>
<div class="parent">
<img src="https://picsum.photos/200/300" alt="示例图片">
</div>
</body>
</html>垂直居中
1. 使用 flexbox 布局
可以使用 flexbox 布局来实现图片的垂直居中。将父元素设置为 display: flex 或 display: inline-flex，并使用 align-items: center 实现垂直居中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中图片</title>
<style>
.parent {
display: flex;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="parent">
<img src="https://picsum.photos/200/300" alt="示例图片">
</div>
</body>
</html>水平和垂直同时居中
1. 使用 flexbox 布局
通过 flexbox 布局可以轻松实现图片的水平和垂直同时居中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平和垂直居中图片</title>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="parent">
<img src="https://picsum.photos/200/300" alt="示例图片">
</div>
</body>
</html>2. 使用 position 和 transform
同样，使用绝对定位和 transform 属性也能实现图片的水平和垂直同时居中。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平和垂直居中图片</title>
<style>
.parent {
position: relative;
height: 300px;
border: 1px solid #ccc;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<img src="https://picsum.photos/200/300" alt="示例图片">
</div>
</body>
</html>