使用css居中显示div

Question

我的div就是不能居中。它显示在左上角。我看了一个YouTube教程，但效果不是很好。

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

您需要设置顶部，左侧，底部和右侧为0，边距自动

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

此方法仅适用于定义的宽度和高度。这将适用于任何宽度/高度。