垂直居中在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

回答

相关问题