垂直對齊一個絕對定位的div中的按鈕

Question

通常我會垂直居中一個按鈕，位於絕對定位的div中top:50%和margin-left:-(height/2)，但今天我意識到它並不完美，或者我不知道如何正確使用它。

例如我做了2個例子。在第一個示例中，<a>標記是內聯元素，在第二個示例中它是block元素。與block元素的定位是完美的，但不幸的是寬度是100％。

請解釋爲什麼第二個例子適用於display:block;？

我對您的跨瀏覽器解決方案非常感興趣。你如何做這個簡單的東西？

這裏是我的CSS：

.container { 
    height:240px; 
    position:relative; 
} 

.box { 
    width:200px; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    background:yellow; 
    text-align:center; 
    padding:20px; 
} 

#example2 { left: 250px; } 

.btn { 
    display:inline-block; 
    padding:5px 12px; 
    line-height:34px; 
    color:#fff; 
    background:red; 
    position:relative; 
    top:50%; 
    margin-top:-17px; 
} 

#example2 .btn { display:block; } 

..和HTML

<div class="container"> 
    <div id="example1" class="box"> 
     <a href="" class="btn">button</a> 
    </div> 
    <div id="example2" class="box"> 
     <a href="" class="btn">button</a> 
    </div> 
</div> 

在線版本可在http://jsfiddle.net/79hqgabq/2/

Answer 1

您所看到的對齊問題正在由margin-top: -17px線造成如此更新的小提琴在.btn類上刪除該行時所看到的：Updated Demo

另一方面，垂直對齊在舊的CSS選擇器上出了名的問題，除非你需要支持舊的瀏覽器，否則轉換到Flexbox是一個好主意。

下面是您的問題與新的display: flex選擇器和相應的子選擇器：Demo w/ Flexbox。這消除了爲了獲得適當的垂直對齊而必須進行像素淡入淡出的重點。

新.box類

.box { 
    width:200px; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    background:yellow; 
    text-align:center; 
    padding:20px; 
    /* New lines for alignment */ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

新.btn類（只是刪除了舊標籤）

.btn { 
    display:inline-block; 
    padding:5px 12px; 
    line-height:34px; 
    color:#fff; 
    background:red; 
} 

編輯：研究塊元素之後有擴大到母公司的100％產權容器。這可以更詳細地解釋here。這就是爲什麼display:block div展開直到達到.box類的填充。

要回答爲什麼display: inline-block元素略有不對齊是因爲默認情況下它在baseline上對齊。請參閱here以供參考。將div的垂直對齊更改爲vertical-align: top將解決此問題。

以下是新增的fiddle，它使用您以前的所有語法，並添加了vertical-align: middle屬性。