css - 水平和垂直居中 div

Question

我将蓝色 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;
}

​jsfiddle 代码链接

Answer 1

我在你的小提琴中试过这个。有效。

.test {
    border: solid;
    display: inline-block;
    background-color:blue;
    position: fixed;
    margin-top: 50%;
    margin-left:50%
}

​</p>

一旦你调整 div 的大小，它就会中断。如果您没有为您的 div 设置大小，那么它在没有固定大小的情况下保持在中心的唯一方法是使用 JavaScript。

但是，您不必费力寻找更好的答案。