<img> 元素是一个内联元素（inline-block 的显示值）。通过给包含它的父元素的 CSS 属性添加 text-align: center; 可以很容易地将其居中。
要使用 text-align: center; 居中图片，你必须将 <img> 放在块级元素（例如 div）内。由于 text-align 属性仅适用于块级元素，因此需要把 text-align: center; 放在块级元素中，以实现水平居中 <img>。
示例
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
}
</style>
</head>
<body>
<div class="img-container"> <!-- Block parent element -->
<img src="user.png" alt="John Doe">
</div>
</body>
</html>注意：父元素必须是块元素。如果不是块元素，则应添加 display: block; CSS属性以及 text-align 属性。
<!DOCTYPE html>
<html>
<head>
<title>Center an Image using text align center</title>
<style>
.img-container {
text-align: center;
display: block;
}
</style>
</head>
<body>
<span class="img-container"> <!-- Inline parent element -->
<img src="user.png" alt="">
</span>
</body>
</html>Demo: Codepen
Object Fit
图片居中后，你可能需要调整其大小。object-fit 属性指定元素如何响应其父框的宽度/高度。
此属性可用于图片、视频或任何其他媒体。它也可以与 object-position 属性一起使用，以更好地控制媒体的显示方式。
我们使用 object-fit 属性来定义其如何拉伸或压缩元素。
语法
.element {
object-fit: fill || contain || cover || none || scale-down;
}值
fill：默认值，调整内容的大小以匹配其父框，而不考虑纵横比。contain：使用正确的宽高比调整内容大小以填充其父框。cover：和contain类似，但是常会裁剪内容。none：以原始尺寸显示图像。scale-down：比较none和contain两者之间的差异，找到最小的具体对象尺寸。
浏览器兼容性
大多数现代浏览器都支持 object-fit。有关兼容性的最新信息，可以查看 http://caniuse.com/#search=object-fit。