css水平居中圖像

Question

我想使用css水平居中圖像。

我在屏幕上顯示我的圖像與下面的HTML代碼：

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

我croping我的形象，我只是想顯示一些圖像，我使用了下面的CSS：

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

但是我無法弄清楚如何在圖像被中心化後如何居中。

任何人都可以提供幫助嗎？

Answer 1

使用位置絕對和保證金這樣

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

Answer 2

使用margin

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

Answer 3

試試這個爲你的CSS：

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

，然後添加到您的圖像居中：

class="center"