在html中垂直居中内容

概述参见英文答案 > How to align a <div> to the middle (horizontally/width) of the page                                    26个 >             Center a DIV horizontally and vertically                               参见英文答案 > 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/

总结

以上是内存溢出为你收集整理的在html中垂直居中内容全部内容，希望文章能够帮你解决在html中垂直居中内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。