如何在透明背景的圖像居中在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。