水平和垂直居中放置DIV
这个问题在这里已经有了答案：
在尝试了很多东西之后，我发现了一种可行的方法。 如果它对任何人都有用，我会在这里分享它。 你可以在这里看到它的工作：http://jsbin.com/iquviq/30/edit
.content {
width: 200px;
height: 600px;
background-color: blue;
position:absolute; /*it can be fixed too*/
left:0; right:0;
top:0; bottom:0;
margin:auto;
/*this to solve "the content will not be cut when the window is smaller than the content": */
max-width:100%;
max-height:100%;
overflow:auto;
}
对于现代浏览器
当你有这种奢侈。 也有flexbox，但在撰写本文时尚未得到广泛支持。
HTML：
<div class="content">This works with any content</div>
CSS：
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
在Codepen或JSBin上进一步修补它
对于较旧的浏览器支持，请查看此主题的其他地方
这是一个演示：http://www.w3.org/Style/Examples/007/center-example
一种方法 （JSFiddle示例）
CSS：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle;
}
HTML：
<div id="content">
Content goes here
</div>
另一种方法 （JSFiddle示例）
CSS
body, html, #wrapper {
width: 100%;
height: 100%
}
#wrapper {
display: table
}
#main {
display: table-cell;
vertical-align: middle;
text-align:center
}
HTML
<div id="wrapper">
<div id="main">
Content goes here
</div>
</div>