问如何在空白区域居中显示图像？

EN

<img>不是块级标记(它的内联级标记)。所以在css中你有两个选择。一种是使用：display:inline-block，然后使用margin : 0 auto，这是在一行中添加多个图像时使用的。

第二个是对margin做同样的事情，但这次，使用display:block;；

我希望这能有所帮助。

在CSS中水平居中显示图像(或任何元素)的标准方法是：

img {margin:0 auto;)

这是以下内容的简短版本：

img (margin:0 auto 0 auto;}

反过来，这又是以下的简写：

img {margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;}

=====

如果上面的标准方法不起作用(可能是因为样式表中其他地方的CSS冲突？)，如果您知道元素的宽度，还有另一种方法可以在CSS中水平居中显示图像(或任何元素)。

假设<img>的宽度为100px：

img {position:relative; left:50%; margin-left:-50px;}

它之所以有效，是因为：

1)使用margin-left:-50px;时，您会告诉浏览器将元素的左边距视为恰好在100px宽度元素的中间

2)使用left:50%；您将告诉浏览器将元素的左边距恰好定位在元素的父元素的中间

因此，当然，当您将元素的中间放在元素的父元素的中间时，您已经成功地将元素水平居中。

=====

如果要针对当代浏览器设置样式，则可以使用CSS3中的灵活框布局模块

img {display:flex; justify-content:center;}

第一种方法

将两个站点的边距设置为50%

#image {
   margin-left: 50%;
   margin-right: 50%;
}

这将使您的html对象居中。

第二种方式

有时这对我不起作用，所以我使用不推荐使用的标记<center>。

<center>
   <img src="/img.png" alt="blubb">
</center>