Question

我正在尝试将<div>垂直居中于<body>

我尝试这样做的原因是因为我试图设计一个采用Windows 8 Metro界面风格的网站

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

Answer 1

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

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

如果你使用它，你的团队需要大小。

html：

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

css：

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

或者你也可以使用它：

css：

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

或者你也可以像这样使用CSS3属性align-content：

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

Answer 2

欢迎来到SO！

垂直居中div实际上非常简单。

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

你有它。

您可能还会考虑absolute centering：

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