使用文本alignment中心的中心图像？
属性是text-align: center; 使用CSS居中图像的好方法？
img { text-align: center; }
这是行不通的，因为text-align属性适用于块容器，而不是内联元素， img是内联元素。 请参阅W3C规范 。
用这个代替：
img.center { display: block; margin: 0 auto; }
这并不总是奏效……如果不是，请尝试：
img { display: block; margin: 0 auto; }
来到这个post ，它为我工作：
img { position: absolute; top: 0; bottom:0; left: 0; right:0; margin: auto; }
（垂直和水平alignment）
另一种做法是围绕一个封闭的段落：
<p style="text-align:center"><img src="..."/></p>
你可以做：
<center><img src="..." /></center>
实际上，你的代码唯一的问题是， text-align属性应用于标签内部的文本（是的，图像计为文本）。 你会想在图像周围放置一个span标签，并将其样式设置为text-align: center ，如下所示：
span.centerImage { text-align: center; }
<span class="centerImage"><img src="http://placehold.it/60/60" /></span>
只有当你需要支持古老的IE浏览器。
现代的做法是在CSS中做margin: 0 auto 。
示例： http : //jsfiddle.net/bKRMY/
HTML：
<p>Hello the following image is centered</p> <p class="pic"><img src="https://twimg0-a.akamaihd.net/profile_images/440228301/StackoverflowLogo_reasonably_small.png"/></p> <p>Did it work?</p>
CSS：
p.pic { width: 48px; margin: 0 auto; }
唯一的问题是， 段落的宽度必须与图像的宽度相同 。 如果你没有在段落上放一个宽度，它将不起作用，因为它会假设100％，你的图像将被alignment，除非你使用text-align:center 。
试试小提琴，如果你喜欢试验。
如果你正在使用图像的类，那么以下将做
class{ display: block; margin: 0 auto; }
如果它只是一个特定的图像，你想要居中alignment，那么下面会做
class img { display: block; margin: 0 auto; }
有三种方法可以使我可以build议的元素居中。
-
使用
text-align属性.parent { text-align: center; }<div class="parent"> <img src="https://placehold.it/60/60" /> </div>
只需改变父alignment:)
在父属性text-align:center上试试这个
你可以在父级上使用text-align: center ，并改变img来display: inline-block – >因此，它的行为就像是一个文本元素，如果父元素有一个宽度，它将被居中！
img { display: inline-block }
img{ display: block; margin-right: auto; margin-left: auto; }
在容器上保存图像您可以使用css3弹性盒来完美地对图像进行垂直和水平居中alignment。 假设你有图像保持器：那么作为CSS你必须使用
.container { display: flex; align-items: center; justify-content: center; height: 100%; }
这将使这个div内的所有内容完美集中。
我会用div来居中alignment一个图像。 如：
<div align="center"><img src="your_image_source"/></div>
将非背景图像居中取决于是否要将图像显示为内联（默认行为）或块元素。
内联的情况
如果要保持图像的CSS属性显示的默认行为，则需要将图像封装到您必须设置的其他块元素中text-align: center;
遇阻
如果您想将图像视为其自身的块元素，则text-align属性不会变得敏锐，您应该这样做：
IMG.display { display: block; margin-left: auto; margin-right: auto; }
你的问题的答案是：
属性是text-align：center; 使用CSS居中图像的好方法？
是和不是。
- 是的，如果图像是其包装中唯一的元素。
- 不，如果在图像的包装器中有其他元素，因为所有图像的兄弟元素的子元素都将inheritance
text-align属性：可能是你不喜欢这种副作用。
参考
- 内联元素列表
- 集中事物
另一种缩放方式 – 显示它：
img { width: 60%; /* or required size of image. */ margin-left: 20% /* or scale it to move image. */ margin-right: 20% /* doesn't matters much if using left and width */ }
使用这个到你的IMG CSS
img{ margin-right: auto; margin-left: auto; }
如果你想设置图像作为背景，我有解决scheme：
.image{ background-image: url(yourimage.jpg); background-position: center; }
display: block带有margin: 0 display: block margin: 0对我来说不起作用，既不包含text-align: center元素。
这是我的解决scheme：
img.center { position: absolute; transform: translateX(-50%); left: 50%; }
translateX被大多数浏览器支持
我发现，如果我有一个图像和文本里面的一些文本，那么我可以使用text-align:centeralignment文本和图像在一举。
HTML：
<div class="picture-group"> <h2 class="picture-title">Picture #1</h2> <img src="http://lorempixel.com/99/100/" alt="" class="picture-img" /> <p class="picture-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus sapiente fuga, quia?</p> </div>
CSS：
.picture-group { border: 1px solid black; width: 25%; float: left; height: 300px; #overflow:scroll; padding: 5px; text-align:center; }
CodePen： https ://codepen.io/artforlife/pen/MoBzrL ? editors = 1100
