垂直居中在HTML

我想內容垂直居中<div>內的<body>垂直居中在HTML

我想這樣做的原因是因爲我想設計一個網站，是在Windows的風格8 Metro啓動屏幕

有誰知道這可以做到嗎？

來源

2014-06-16 SomeoneSpecial99

後的代碼，你試過。 – j08691

歡迎來到SO。在發佈類似問題之前，您應該始終檢查是否存在問題。谷歌搜索這顯示結果馬上 – Liam

@ j08691我在哪裏發佈？ -_- – SomeoneSpecial99

如果你想點塊verticaly您可以使用這一招的

保證金是你的尺寸集團的一半。

如果你使用這個，你需要在你的區域的大小。

HTML：

<div id="center"></div>

CSS：

#center{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    height:400px; 
    width:600px; 
    margin-left:-300px; 
    margin-top:-200px; 
}

DEMO：http://jsfiddle.net/ucbRs/

，或者您也可以使用此：

CSS：

#center{ 
    position:absolute; 
    left:100px; 
    top:100px; 
    bottom:100px; 
    right:100px; 
}

DEMO：http://jsfiddle.net/ucbRs/1/

，或者您也可以使用CSS3屬性align-content這樣的：

body{ 
    display:flex; 
    flex-flow: row wrap; 
    align-content:center; 
} 
#center{ 
    margin:0 auto; 
}

DEMO：http://jsfiddle.net/ucbRs/3/

來源

2014-06-16 14:17:50

歡迎SO！

垂直居中div其實很簡單。

div{ 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}

你有它。

Demo

您也可以考慮absolute centering：

div{ 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

Demo

來源

2014-06-16 14:22:19 AstroCB

垂直居中在HTML

回答

相關問題