Center ein div mit CSS

Question

mein div nur würde nicht zentrieren. Es wird in der linken oberen Ecke angezeigt. Ich habe ein YouTube-Tutorial gesehen, aber das hat nicht funktioniert.

HTML:

<div id="preloader"> 
    <div id="preloader-gif"></div> 
</div> 

CSS:

body{ 
position: absolute; 
width: 100%; 
height: 100%; 
left: 0; 
top: 0; 
overflow: hidden; 
} 

#preloader{ 
position: absolute; 
width: 100%; 
height: 100%; 
left:0; 
top:0; 
background-color: #0e1e2f; 
content:""; 
z-index: 9999 
} 

#preloader-gif{ 
display: table; 
position: absolute; 
width: 25%; 
height: 25%; 
margin: 0 auto; 
background: url(./preloader.gif) no-repeat scroll center center; 
} 

Answer 1

Sie müssen oben setzen, links, unten und rechts auf 0 mit Rand Auto

https://jsfiddle.net/LLwntybh/

#preloader-gif{ 
    position: absolute; 
    width: 25%; 
    height: 25%; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background-color: red; 
} 

T seine Methode funktioniert nur mit definierter Breite und Höhe wie du es hast. Dies funktioniert für jede Breite/Höhe.