如何中心屏幕（垂直和水平方向）

我有這些代碼塊的表：如何中心屏幕（垂直和水平方向）

<table border="1px"> 
<tr> 
<td> 
my content 
</td> 
</tr> 
</table>

我想展示我的表在屏幕（垂直和水平方向）的中心。

Here is a demo。

我該怎麼辦呢？

來源

2011-09-17 cafu

這修正畫面上的框死點：

HTML

<table class="box" border="1px"> 
    <tr> 
     <td> 
      my content 
     </td> 
    </tr> 
</table>

CSS

.box { 
    width:300px; 
    height:300px; 
    background-color:#d9d9d9; 
    position:fixed; 
    margin-left:-150px; /* half of width */ 
    margin-top:-150px; /* half of height */ 
    top:50%; 
    left:50%; 
}

查看結果

http://jsfiddle.net/bukov/wJ7dY/168/

來源

2011-09-17 15:25:54

只需幾點說明：'位置：絕對值「通常會比」固定值「更好，因此您可能需要爲父元素設置」位置：相對「，並且在表格的維度未知時會出現問題。但是如果你可以設置尺寸，那麼這種方法是可以的。 – Arsen7

位置固定元素是相對於窗口，而絕對位置元素是相對於父母（也可以是窗口，如果位於主div之外），相對於窗口定位某些東西要比某些div更容易在登錄表單或彈出窗口的情況下，所以我去了。 –

你說得對。固定確實會更好的登錄窗口。 – Arsen7

我想這應該做的伎倆：

<table border="1px" align="center">

根據http://w3schools.com/tags/tag_table.asp不贊成這種方式，而是嘗試。如果它不起作用，請參閱網站上提到的樣式。

來源

2011-09-17 14:17:17 kgrevehagen

http://w3fools.com/ – Pheonix

水平對中很容易。你只需要兩個倍數設置爲「自動」：

table { 
    margin-left: auto; 
    margin-right: auto; 
}

垂直居中通常是由父元素的顯示類型設置爲table-cell和使用vertical-align屬性來實現的。假設你有你的桌子周圍<div class="wrapper">：

.wrapper { 
    display: table-cell; 
    vertical-align: middle; 
}

更詳細的信息可以在http://www.w3.org/Style/Examples/007/center

發現如果你需要對舊版本的Internet Explorer 的支持（我不知道是什麼版本什麼工作這個奇怪的和很少使用的瀏覽器;-)）那麼你可能要search the web更多的信息，如：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html（只是先打，這似乎提IE）

來源

2011-09-17 15:12:48 Arsen7

左/右中心部分內工作的align屬性，但您的指示垂直居中似乎會否定一切。以下是您提供的代碼和結果，所有內容都以屏幕左上角爲結尾。我填錯了嗎？ http://jsfiddle.net/wJ7dY/161/ – Bukov

包裝需要比它包含的東西更大; o）請參閱http://jsfiddle.net/uLQZU/ –

This guy有我們正在尋找的魔杖，夥計。

引用他的回答是：

只需添加「的位置是：固定」，它會保持在視圖即使你向下滾動。看到它在http://jsfiddle.net/XEUbc/1/

#mydiv { 
    position:fixed; 
    top: 50%; 
    left: 50%; 
    width:30em; 
    height:18em; 
    margin-top: -9em; /*set to a negative number 1/2 of your height*/ 
    margin-left: -15em; /*set to a negative number 1/2 of your width*/ 
    border: 1px solid #ccc; 
    background-color: #f3f3f3; 
}

來源

2013-04-09 06:13:20 Bukov

我一直在使用這個小騙子有一段時間了。你可能會喜歡它。窩要在其他表居中表：

<table height=100% width=100%> 
<td align=center valign=center>

（這裏補充表格）

</td> 
</table>

對齊和VALIGN把表恰好在屏幕的中間，不管還有什麼正在進行。

來源

2013-10-22 02:05:42

這隻適用於刪除以下的！DOCTYPE：<！DOCTYPE html PUBLIC「 - // W3C // DTD XHTML 1.0 Transitional // EN」「http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd「>當然，如果你使用默認添加了這個的編輯器。驅使我瘋了一次嘗試這個「作弊」，並不知道爲什麼它不工作。 – IamBatman

我試着在HTML5中對齊屬性。它不受支持。此外，我嘗試使用樣式屬性進行flex-align和vertival-align。仍然無法將TABLE放置在屏幕中央。以下風格放置在水平中心的桌子上。

style =「margin：auto;」

來源

2014-04-03 12:59:06

對於水平對齊方式（無CSS）

只需插入表標籤

<table align="center"></table

來源

2016-06-22 16:51:11 user6500381

如何中心屏幕（垂直和水平方向）

回答

相關問題