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

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