Wie man Bild in der Mitte mit der örtlich festgelegten Position einstellt

Question

Ich versuche, Bild mit der Position zu zentrieren, die in CSS behoben wird. Der Code habe ich versucht,

<style> 
.bgimg { 
    top: 50%; 
    left: 50%; 
    position: fixed; 
    opacity:0.09; 
    marging: auto; 
} 
</style> 

zu https://www.w3schools.com/code/tryit.asp?filename=FJZQPD9BZUBG Siehe

Answer 1

Für variable Breite/Höhe Inhalt, sollten Sie mit ein, wie diese Transformation versetzt, um einen Prozentsatz verwenden:

.bgimg { 
    top: 50%; 
    left: 50%; 
    position: fixed; 
    opacity:0.09; 
    transform: translate(-50%, -50%); 
} 

Oder Wenn Sie die Breite und Höhe kennen, können Sie die Verwendung einer Transformation vermeiden und alle Positionen auf 0 setzen, gepaart mit margin: auto;:

.bgimg { 
    width: 400px; 
    height: 400px; 
    position: fixed; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
} 

Sie können beide Methoden unten in Aktion sehen!

.bgimg { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    opacity: .5; 
 
} 
 

 
/* you need to set the width and height on this one, otherwise it stretches it to fill */ 
 
.center-something-without-transform { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    background-color: blue; 
 
}

<img class="bgimg" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg" /> 
 
<div class="centered-without-transform"></div>