在html中垂直居中内容

参见英文答案 > How to align a <div> to the middle (horizontally/width) of the page26个
> Center a DIV horizontally and vertically 7个
我试图垂直居中一个< div>在< body>内

我试图这样做的原因是因为我正在尝试设计一个符合Windows 8 Metro开始屏风格的网站

有谁知道如何做到这一点？

解决方法

如果你想要中心块verticaly你可以使用这个技巧

保证金是你的规模集团的一半.

如果你使用它,你需要你的团队的大小.

HTML：

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

css：

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

演示：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;
}

演示：http://jsfiddle.net/ucbRs/3/

原文地址：https://www.jb51.cc/html/231625.html