用css居中一个div [重复]答案

【问题标题】：Center a div with css [duplicate]用css居中一个div [重复]
【发布时间】：2016-09-04 15:08:03
【问题描述】：

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

【问题讨论】：

在 CSS 中，将 #preloader-gif 宽度设为 100%。

标签： html css

【解决方案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;
}

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

【讨论】：