下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式
html
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
共同的css
.content{
width: 50%;
height: 50%;
margin: 0 auto;
background-color: tomato;
}
1.最简单的margin:auto水平居中
这里box里的overflow:hidden的作用及具体原因见 http://blog.csdn.net/oiu1010110/article/details/53192048
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
overflow: hidden;/*这里是简单的防止边界叠加，若不加，box的margin-top将变成70px*/
/*padding-top: 1px;*/
/*border: 1px solid transparent;*/
/*float: left;*/
}
.content{
width: 50%;
