居中横向和纵向的div

我将一个蓝色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 link代码

来源

2012-11-05 user782220

这个问题上频繁出现SO。请参阅现有答案：http://stackoverflow.com/search?q=Centering+div+horizontally+and+vertically – feeela

除了所有这些答案都使用预定义的宽度和高度代替inline-block – user782220

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

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

一旦调整DIV这将打破。如果你没有为你的div设置一个尺寸，那么它将停留在没有确定尺寸的中心的唯一方法就是使用JavaScript。

但是，you don't have to look too hard to find better answers.

来源

2012-11-06 00:49:21 harrypujols

居中横向和纵向的div

回答

相关问题