在html中垂直居中内容 [英] Vertically Centering content in html
问题描述
我试图在< body>
< div> 我尝试这样做的原因是因为我试图设计一个风格为Windows 8 Metro开始屏幕的网站。
有人知道如何做到这一点吗？
这个技巧的
保证金是您的尺寸块的一半。
如果你使用这个，你需要你的尺寸bloc。html：
< div id =center >< / DIV>
css：
#center {
position：absolute;
剩下：50％;
top：50％;
height：400px;
width：600px;
margin-left：-300px;
margin-top：-200px;
}
DEMO： http://jsfiddle.net/ucbRs/
或者你也可以使用这个：
#center {
position ：绝对;
left：100px;
top：100px;
bottom：100px;
right：100px;
}
DEMO： http://jsfiddle.net/ucbRs/1/
或者你也可以像这样使用CSS3属性 align-content ：
body {
display：flex;
flex-flow：换行;
align-content：center;
}
#center {
margin：0 auto;
}
DEMO： http://jsfiddle.net/ucbRs/3/
I am trying to vertically center a <div> within a <body>
The reason I'm trying to do this is because I'm trying to design a website that is in the style of the Windows 8 Metro start screen
Does anyone know how this can be done?
If you want center block verticaly you can use this trick's
margin is a half of your size bloc.
If you use this you need size on your bloc.
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/
or you can also use this :
css :
#center{
position:absolute;
left:100px;
top:100px;
bottom:100px;
right:100px;
}
DEMO : http://jsfiddle.net/ucbRs/1/
or you can also use a CSS3 property align-content like this :
body{
display:flex;
flex-flow: row wrap;
align-content:center;
}
#center{
margin:0 auto;
}
DEMO : http://jsfiddle.net/ucbRs/3/
这篇关于在html中垂直居中内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
