Firefox中的表垂直對齊

問題是當使用<table>（或<div>與display:table）時，我怎樣才能將此表元素垂直居中？Firefox中的表垂直對齊

我用垂直居中的這個方法：

margin: auto; 
position: absolute; 
top: 0; left: 0; bottom: 0; right: 0; 
overflow: auto;

當使用鉻這種方法（任何的Webkit或閃爍），它工作得很好，但不能在Firefox。在Chrome中運行此提琴（http://jsfiddle.net/Mu4yd）時，表格是垂直居中的，而在Firefox中，它位於頂部。

有什麼應該添加，使其在Firefox的工作？或者，有沒有其他方法可以在兩個瀏覽器中垂直居中表格（至少）？

來源

2014-01-31 Hazem AbuMostafa

有一個負責任的友好和靈活的解決方案居中。如果你不知道div的寬度或高度，您可以使用此代碼CSS3：

Vertical align center with transform - fiddle

.valign{ 
    transform: translate(-50%, -50%);  
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
}

來源

2014-01-31 09:09:19 catchke2ro

它的工作原理。但是，「轉換」不是很貴嗎？沒有更簡單的解決方案嗎？ –

我使用這個代碼很多，我認爲它是CSS3世界中的「輕量級」解決方案。 – catchke2ro

您可以使用下面的方法

#tablelo{ 
    background-color: black; 
    height: 100px; 
    width: 100px; 
    display: table;  
    margin: -50px 0 0 -50px; 
    position: absolute; 
    top: 50%; left: 50%; 
    overflow: auto; 
}

Fiddle Demo

來源

2014-01-31 03:16:21

但它不是一般的。它需要在表格大小發生變化時更改邊距大小。 –

Firefox中的表垂直對齊

回答

相關問題