html - 文字志忠 - css水平居中圖像

文字垂直居中 (3)

我試圖使用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);
}

但是，一旦它被歪曲，我無法弄清楚如何使圖像居中。

有人能幫忙嗎？

使用margin

margin-left:auto;
margin-right:auto;

像這樣使用絕對位置和邊距

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

試試這個CSS：

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

然後添加到您的圖像以使其居中：

class="center"