使用 CSS 将图像水平居中

Question

我正在尝试使用 css 将图像水平居中。

我使用以下 HTML 代码在屏幕上显示我的图像：

 <div id="loading" class="loading-invisible">
    <img class="loading" src="logo.png">
</div>

我正在裁剪我的图像，因为我只想显示一些图像并且我正在使用以下 css：

 img.loading
{
position:absolute;
clip:rect(0px,681px,75px,180px);
}

但是我不知道如何在裁剪后将图像居中。

有人能帮忙吗？

原文由 Aaron 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

像这样使用绝对位置和保证金

img.loading{
  position: absolute;
  left: 50%;
  margin-left: -(half ot the image width)px
}

原文由 Zendy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为你的 CSS 尝试这个：

 .center img {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

然后添加到您的图像以使其居中：

 class="center"

原文由 Cynthia 发布，翻译遵循 CC BY-SA 3.0 许可协议