如何在CSS中垂直對齊表格，其中高度和寬度都是百分比

我在這個論壇上無處不在尋找一種在CSS中適用於所有瀏覽器，IE，Firefox，Chrome和Safari的垂直對齊方式。找到了這個解決方案，下面（它工作），但只有當你指定一個表的PIXELS。由於人們擁有不同尺寸的屏幕，因此對於文本框不太有用。如何在CSS中垂直對齊表格，其中高度和寬度都是百分比

<html> 
    <head> 
    <title>Dead Center</title> 
    <style type="text/css"> 
     .dead_center { 
     width:270px; 
    height:150px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-75px 0 0 -135px; 
     } 
    </style> 
    </head> 
    <body> 
    <table class="dead_center" border=5> 
     <tr> 
     <td>My centered table</td> 
     </tr> 
    </table> 
    </body> 
</html>

你怎麼能修改上述，以便你的表只是說50％的屏幕寬度，沒有指定高度。即無論文本的長度是什麼，都會顯示垂直居中。

Here's the page I'm working on fixing up.

我希望做的是採取兩個表和格式化他們，使他們很好地適應在頁面的中心。左側有文本/副本，右側是GetResponse表單。兩者都應該垂直對齊，所以看起來不錯。現在他們處於頂端。

來源

2014-03-26 Viktor

增加高度= 100％固定它！謝謝！ OMG那麼簡單。 – Viktor

簡短的回答是將高度=「100％」添加到您的最大外表。這將垂直居中你的盒子。

但是，我會建議使用divs而不是表格，並使每個圓角框位於左側和右側。表格是網頁佈局的糟糕做法。

在這兩種情況下，當您在較小的屏幕上查看時，您將需要使用媒體查詢來調整樣式。

來源

2014-03-26 02:05:17 user2986096

太棒了！它現在完美運作。我感到震驚的是，這種微小的調整使得這個世界有所不同。 – Viktor

我想你想達到的是一個響應速度很快的網頁。我的建議是，你應該把表格標籤（無表格的web實現），並使用div或節標籤。然後你可以使用媒體查詢來使你的頁面響應，或者你可以使用一些CSS3框架，如bootstrap。

來源

2014-03-26 02:12:09

是的，但是，它不會與舊版瀏覽器兼容。我的版本適用於舊版瀏覽器以及新款瀏覽器。我很好奇你將如何重寫頁面而不使用表格。每次我嘗試這樣做，似乎都比它的價值更復雜。你有我可以看的代碼示例嗎？謝謝。 – Viktor

如何在CSS中垂直對齊表格，其中高度和寬度都是百分比

回答

相關問題