Html css 水平居中图像

css to center a image horizontally

提问by Aaron

I am trying to center a image horizontally using css.

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

I am displaying my image on the screen with the following HTML code:

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

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

I am croping my image as I only want to display some of the image and I am using the following css:

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

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

however I can't work out how to center the image once it has been croped.

但是我无法弄清楚如何在裁剪后将图像居中。

Anyone able to help ?

任何人都可以提供帮助？

采纳答案by Zendy

use position absolute and margin like this

像这样使用绝对位置和边距

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

回答by Cynthia

Try this for your CSS:

为你的 CSS 试试这个：

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

and then add to your image to center it:

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

class="center"

回答by Ali

You can use different method:

您可以使用不同的方法：

Method 1:

方法一：

Its a simple method, use "text-align: center;" for your parent div.

这是一个简单的方法，text-align: center;为您的父 div使用“ ”。

#loading {
  text-align: center;
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

小提琴

Method 2:

方法二：

Please check the code:

请检查代码：

#loading img {
  margin: 0 auto;
  display: block;
  float: none; 
  /*width: 200px; if its a large image, it need a width for align center*/
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

小提琴

Method 3:

方法三：

Using "display: flex;"

使用“ display: flex;”

#loading {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

小提琴

Method 4:

方法四：

You can use "position: absolute;",

您可以使用“ position: absolute;”，

#loading {
        position: relative;
        }
#loading img{
        position: absolute;
        top: 0;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, 0%);
        -ms-transform: translate(-50%, 0%);
        -webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        -o-transform: translate(-50%, 0%);
}

<div id="loading" class="loading-invisible">  
    <img class="loading" src="https://dummyimage.com/200x100/000/fff.png&text=Logo">
</div>

FIDDLE

小提琴

Hope this will help you.

希望这会帮助你。

回答by Paul Dessert

Use margin

用 margin

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