Question

我重写了这个问题，因此可以更好地解释。

我的问题是......如果类“Window”是一个div，它可以根据加载的内容在高度上增长，我如何让id“loader”正好在中间浮动（居中的高度/宽度））div类“窗口”？ “loader”应该浮动在Window类的内容之上。希望这次我能够很好地解释这一点。再次感谢。

以下是以下代码......

.Window {
   margin:15px;
   width:100%;
   text-align:center;
}

#loader {
    display:none;
    width:32px;
    position: relative;
    top: 50%;
    margin: 0 auto;
}

<div id="someid" class="Window">
   <div id="loader">yo</div>
</div>

Answer 1

首先，你需要在#loader上设置一个高度。

然后，将其margin样式调整为 margin: -{H}px auto auto auto 其中{H}是#loader的一半高度。

Answer 2

<html>
<style type="text/css">
.Window {
background-color:green;
height:auto;
width:100%;
overflow:hidden;
position:relative;
}
#loader{
width:32px;
height:32px;
background-color:red;
position: relative;
margin: 0 auto;
}
.new{
height:30px;
width:30px;
}
</style>
<script type="text/javascript">
function addContent(){
var add = document.getElementById("someid");
var div = document.createElement("div")
div.setAttribute("class","new");
add.appendChild(div);
}
</script>
<body >
<div id="someid" class="Window">
<div id="loader" onclick="addContent()">yo</div>
</div>
</body>

更新：检查更新的代码，希望这是您想要的......

100％高度Div，图像恰好位于中间 - CSS

2 个答案: