Question

我无法在页面的顶部中心放置div。我正在使用CSS，但这里没有任何作用。

#loader {
  position: relative;
  margin: 0 auto;
  text-align: left;
  clear: left;
  height: auto;
  z-index: 0;
}

<body>
  <div id="loader" style='display: none'><img src='img/basic/loader4.gif' /></div>
</body>

我已经花了2个小时，但仍然无法弄明白。

Answer 1

如果要使用width，则必须指定margin: 0 auto;属性。

如果您不知道宽度，只需添加display: table属性即可。

#out {
   display: table;
   margin: 0 auto;
}

Answer 2

首先从您的div中移除display:none;，其中id = loader＆amp;将text-align:center;添加到其中

#loader{  
    position:relative;
    margin:0 auto;
    clear:left;
    height:auto;
    z-index: 0;
    text-align:center;/* Add This*/
}

工作演示： http://jsfiddle.net/surendraVsingh/FCEhD/

Answer 3

您需要div的特定宽度，否则它将使用所有可用的宽度，并且边距无效。例如：

#loader{  
  margin: 0 auto;
  width: 200px;
}

Answer 4

#loader{  
   margin: 0px auto;
   width: 100px;
}

Answer 5

<div id="loader" style='display: none' align="center">

按ctrl + space我不确定语法并且在css边距和填充中必须设置为0

Answer 6

#loader
{
    position: absolute;
    width: xxpx;
    height: xxpx;
    margin:0px auto ;

}

或者你可以使用

margin-left:xx;  and `margin-top:0px;`

Answer 7

#loader{display:none;clear:both;margin:0px auto;width:[a number]px;}

当然你也应该注意浏览器缓存。清除浏览器缓存并再次测试

Answer 8

在上面的例子中，每个人都假设他想要全宽＆＃39;。

这适用于绝对的全宽度/高度父容器，但会自动将宽度限制为仅限内容宽度

父容器

display: block; 
position: absolute;
clear: both;
width: 100%;
height: 100%;
border: solid thin red;

儿童容器

display: block;
position: absolute;
top:0;
transform: translateX(50%);
padding-left:.5em;
padding-right:.5em;
margin-left:auto;
margin-right:auto;
right:50%;

如何使用CSS将div放在页面的顶部中心位置？

8 个答案: