65

我正在尝试使用 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);
}

但是,一旦图像被裁剪,我无法弄清楚如何使图像居中。

有人能帮忙吗?

4

4 回答 4

136

为你的 CSS 试试这个:

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

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

class="center"
于 2012-08-08T05:20:30.330 回答
32

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

img.loading{
  position: absolute;
  left: 50%;
  margin-left: -(half ot the image width)px
}
于 2012-08-08T00:58:36.717 回答
13

您可以使用不同的方法:

方法一:

它是一个简单的方法,使用“ 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>

小提琴

方法二:

请检查代码:

#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>

小提琴

方法三:

使用“ 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>

小提琴

方法四:

您可以使用“ 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>

小提琴

希望这会帮助你。

于 2018-06-19T06:44:07.057 回答
4

采用margin

margin-left:auto;
margin-right:auto;
于 2012-08-08T00:49:04.287 回答