不知道容器高度的垂直中心

Question

不知道容器的高度是否可以居中垂直？

我試過顯示：內嵌塊和垂直對齊：中間，它不起作用。我究竟做錯了什麼？

這裏查看：http://jsfiddle.net/dSq2n/

HTML：

<div class="wrap"> 
    <div class="red1"></div> 
    <div class="red2"></div> 

    <div class="text"> 
     first<br> 
     second<br> 
     third<br> 
     forth 
    </div> 
</div> 

CSS：

.wrap{ 
    position:absolute; 
    top:10px; left:10px; 
    width:200px; 
    text-align:center; 
    background:grey; 
} 

.red1, .red2{ 
    position:absolute; 
    width:20px; height:20px; 
    display:inline-block; /* ? */ 
    vertical-align: middle; /* ? */ 
    background:red; 
} 

.red1{ 
    left:0px; 
} 
.red2{ 
    right:0px; top:0px; 
} 

Answer 1

您使用position: absolute;所以使用vertical-align是沒有用的，像這樣做

Demo

.red1, .red2{ 
    position:absolute; 
    width:20px; height:20px; 
    background:red; 
    top: 50%; 
    margin-top: -10px; 
} 

你也需要從

刪除 top: 0;

.red2{ 
    right:0px; 
} 

說明：我們在這裏做的是使用top: 50%;將元素降低50％;但這並不是完全居中，所以我們-10px;使用margin-top這是要居中元素的總高度的1/2垂直

Answer 2

假設你要垂直居中的紅色盒子，是的，這是可能的。但是你確實需要知道那些盒子的高度（你這樣做）。只需使用以下屬性：

top: 50%; 
margin-top: -10px; // half the height of the element 

演示：http://jsfiddle.net/dSq2n/2/

Answer 3

習慣了這種的CSS

.red1, .red2{ 
    position:absolute; 
    width:20px; height:20px; 
    top:50%;margin-top:-10px; 
    margin-top:-10px; 
    background:red; 
} 
.red1{left:0;} 
.red2{right:0;} 

刪除減display inline-block

Demo

Answer 4

你不能使用position:absolute然後說vertical-align:middle

Answer 5

這裏的解決方案試試這個檢查這個小提琴http://jsfiddle.net/sarfarazdesigner/dSq2n/6/

.red1, .red2{ 
    position:absolute; 
    width:20px; height:20px; 
    display:block; /* how you want to display */ 
    top:50%; /* give position from top */ 
    margin-top:-10px; /* put minus margin from top formula is total height/2 */ 
    background:red; 
} 

.red1{ 
    left:0px; 
} 
.red2{ 
    right:0px; 
}