水平居中：
1.text-align:center
2.margin:0 auto;
需要设置内容宽度；
垂直居中;
1.vertical-align:middle
该属性适用于只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。例如图片，按钮，单复选框，单行/多行文本框等HTML控件；
2.line-height
该属性适用于单行文本的垂直居中；多行文字的垂直居中可以使用span标签将文本包裹，然后使用vertical-align属性使其居中；
3.以下是关于内容垂直居中的实用方法
方法1：position+margin 方法2：float+height+margin 方法3：position+margin;IE8-不支持
<html> <head> <title>垂直居中</title> <meta charset="utf8"> <style type="text/css"> .contain{ height:800px; width: 800px; border: 1px solid #000; position: relative; } .one{ height:600px; width: 400px; border: 1px solid #000; position: absolute; top:50%; margin-top: -300px; } .two{ height:300px; width: 200px; border: 1px solid red; clear: both; } .two_1{ height:50%; margin-bottom: -150px; float: left; } .three{ width: 200px; position: absolute; margin: auto; top:0; left: 0; right: 0; bottom: 0; height:400px; border: 1px solid green; }*/ </style> </head> <body> <div class="contain"> <div class="one">方法1：position+margin负值</div> <div class="two_1"></div> <div class="two">方法2：float+height+margin负值</div> <div class="three">方法3：position+margin;IE8-是不支持的,实现垂直水平居中</div> </div> </body> </html>