我将一个蓝色 div 设置为 display: inline-block;
以便它收缩包装到其内容。我试图将蓝色 div 置于红色 div 的中间。
<a href="www.google.com">hi</a>
<div class="dim">
<div class="test">
<div> test </div>
<div> 2nd </div>
</div>
</div>
.dim {
height:100%;
width:100%;
position:fixed;
left:0;
top:0;
z-index:1 !important;
background-color:red;
opacity: 0.5;
}
.test {
border: solid;
display: inline-block;
background-color:blue;
}
最佳答案
我在你的 fiddle 中试过这个。它奏效了。
.test {
border: solid;
display: inline-block;
background-color:blue;
position: fixed;
margin-top: 50%;
margin-left:50%
}
一旦你调整 div 的大小,它就会中断。如果您没有为您的 div 设置大小,则它在没有固定大小的情况下保持在中心的唯一方法是使用 JavaScript。
关于css - 水平和垂直居中div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13241994/