Center a div with css

Question

my div just wouldn't center. It displays in the left-top-corner. I watched a YouTube tutorial, but that didn't work out as well.

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;
}

In the CSS, make your `#preloader-gif` width : 100%. – cssyphus May 09 '16 at 20:40 — cssyphus, May 09 '16 at 20:40

score 0 · Answer 1 · answered May 09 '16 at 20:42

You need to set top, left, bottom and right to 0 with margin 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;
}

This method only works with defined width and height like you have. This will work for any width/height.

Center a div with css

1 Answers1