在html中垂直居中内容[重复]答案

【问题标题】：Vertically Centering content in html [duplicate]在html中垂直居中内容[重复]
【发布时间】：2014-08-06 09:24:09
【问题描述】：

我试图在<body> 中垂直居中<div>

我尝试这样做的原因是因为我正在尝试设计一个采用 Windows 8 Metro 开始屏幕样式的网站

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

【问题讨论】：

【解决方案1】：

如果你想要垂直居中块，你可以使用这个技巧

边距是你的大小块的一半。

如果你使用它，你需要在你的块上设置大小。

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;
}

【讨论】：

【解决方案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;
}

【讨论】：