居中橫向和縱向的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

回答

相關問題