如何居中html5 section元素？ verticaly

這裏基本上是我的html結構內容部分是我想要在頁眉和頁腳之間居中的部分，以便在所有的分辨率中間。我已經嘗試使用表格方法，其中你將一個div放在具有display：table的部分周圍，然後將content部分設置爲display：table-cell;垂直對齊：中部;但它似乎會影響divs/section在內容中的位置，並將頭部元素頂部的屏幕左上部分置於position：absolute ;.如何居中html5 section元素？ verticaly

<header> 
</header> 
<section id="container"> 
<section id="content"> 
</section> 
</section> 
<footer> 
</footer>

來源

2012-12-20 Connor Brough

爲了給你一個爲什麼複製和粘貼沒有幫助的例子，我做了一個[jsfiddle]（http://jsfiddle.net/y47Fd/）你的代碼。這是一個有用的網站進行故障排除。如果你決定給我們一個你創建的jsfiddle的鏈接，一定要把你的代碼放在問題中。 – MiniRagnarok

假設這樣的：

div {width: 300px; height: 200px;}

您可以添加：

div {position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -150px;}

這是很好的做法，把「包裝」周圍的所有元素body標籤內。

讓我知道這是如何適用於你。

來源

2013-01-23 20:24:30 Josh

對於第一列;

float: left; 
position: absolute; 
left: 50%;

第二等;

float: left; 
position: absolute; 
left: 70%;

但是這種方法效率不高，你不妨在div內使用float:left;。

來源

2017-04-25 11:09:17 CagCak

如何居中html5 section元素？ verticaly

回答

相關問題