如何在透明背景的图像居中在css中？

Question

我有一些搜索按钮的内容。如果我点击搜索按钮，它需要出现一个处理GIF图像，应该在透明背景中央。内容看起来像这样。 预先感谢每一个答案

.img-loader{ 
 
    text-align: center; 
 
    width: 50px; 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
.wrapper{ 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 135, 0, 0.1); 
 
    position: absolute; 
 
    top: 0; 
 

 
}

<div class="content"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" class="img-loader"> 
 
</div>

Answer 1

更改CSS的img这样

.img-loader{ 
    text-align: center; 
    width: 50px; 
    display: block; 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    margin:auto; 
} 

.img-loader{ 
 
    text-align: center; 
 
    width: 50px; 
 
    display: block; 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    top:0; 
 
    bottom:0; 
 
    margin:auto; 
 
} 
 

 
.wrapper{ 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 135, 0, 0.1); 
 
    position: absolute; 
 
    top: 0; 
 

 
}

<div class="content"> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <img src="https://pixabay.com/static/uploads/photo/2015/08/31/15/29/person-915604_640.jpg" class="img-loader"> 
 
</div>

Answer 2

尝试这样的：Demo

.img-loader {  
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -28px 0 0 -25px; 
} 
.wrapper { 
    position: absolute; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
} 

HTML：

<div class="wrapper"> 
    <img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" alt="" class="img-loader" /> 
</div> 

Answer 3

而不是使用top和position属性，你可以尝试做这种方式：

.img-loader{ 
    width:50px; 
    display: inline-block; 
    margin:0 auto; 
} 

这将保持图像center-align。