Css для центрирования изображения по горизонтали

Я пытаюсь центрировать изображение горизонтально, используя 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);
}

однако я не могу разобраться, как центрировать изображение после его обрезки.

Любой, кто может помочь?

Ответы

Ответ 1

использовать положение абсолютное и маржи, подобное этому

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

Ответ 2

Попробуйте это для своего CSS:

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

а затем добавьте к своему изображению, чтобы центрировать его:

class="center"

Ответ 3

Используйте margin

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