如何在CSS中将图片居中？
CSS帮助我们控制Web应用程序中图像的显示。图像或文本居中是CSS中的常见任务。要使图像居中，我们必须将
margin-left 和
margin-right 的值设置为
auto 并通过使用使其成为块元素
display: block; 属性。
如果图像位于div元素中，则可以用
text-align: center; 属性
<img>元素被认为是一个内联元素，可以通过应用
text-align: center; 属性轻松地将其居中
CSS 到包含它的父元素。
注意：如果宽度设置为100％（全角），则图像无法居中。
我们可以使用缩写属性
margin 并将其设置为
auto 以使图像在中心对齐，而不是使用
margin-left 和
margin-right 属性。
让我们看看如何通过将
text-align: center; 属性应用于图像来使图像居中父元素。
示例
在此示例中，我们使用
text-align: center; 属性来对齐图像。该图像位于div元素中。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
}
img{
height: 300px;
width: 300px;
}
#center {
text-align: center;
}
</style>
</head>
<body>
<div id ="center">
<img src="lion.png">
</div>
</body>
</html>
输出
示例
现在，我们使用的是
margin-left：auto;边距右：自动； 和
显示：阻止； 属性，用于将图像与中心对齐。
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: lightblue;
}
#image {
display: block;
margin-left: auto;
margin-right: auto;
border: 8px ridge blue;
padding: 5px;
}
</style>
</head>
<body>
<img src = "lion.png" id ="image" width="300" height="300">
</body>
</html>
输出
