1，水平居中
1-1，行内元素居中
h1 { text-align: center }
运行效果：
1-2，定宽块状元素居中
.div1 {
border: 1px solid red;
width: 200px;
background-color: #ff0;
margin: 30px auto
}
运行效果：
设置“margin: 30px auto”来实现块状元素居中，元素必须满足定宽（宽度width是固定值）和块状两个条件
1-3，不定宽块状元素居中
不定宽度的块状元素有三种方法居中：
1）加入table标签
利用table标签的长度自适应性（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
步骤如下：
第一步：为需要居中的元素外面加入一个 table 标签（包括 <tbody>，<tr>，<td>）
<div>
<table>
<tbody>
<tr>
<td> 不定宽元素一 </td>
</tr>
</tbody>
</table>
</div>
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
table {
border: 1px solid red;
margin: 0 auto
}
div { border: ipx solid red }
运行效果：
2）设置display: inline方法：
改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align: center 来实现居中效果
.div2 { text-align: center }
运行效果：
.div2 ul { display: inline }
运行效果：
.div2 li {
display: inline;
border: 1px solid red;
margin-right: 20px
}
运行效果：
将上面三组css样式组合为一组，
.div2 { text-align: center }
.div2 ul {
border: 1px solid yellow;
display: inline
}
.div2 li {
display: inline;
border: 1px solid red;
margin-right: 20px
}
运行效果：
这种相比第一种的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，减少了一些功能，比如设定长度值。
3）设置position: relative和 left: 50%：
利用相对定位的方式，将元素向左偏移50%，即达到居中的目的
.div3 {
position: relative;
left: 50%
}
运行效果：
2，垂直居中
2-1，父元素高度确定的单行文本
设置父元素的 height 和 line-height 高度一致来实现
.div4 {
height: 200px;
line-height: 200px;
background-color: #0cc
}
运行效果：
注：
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离块。
2-2，父元素高度确定的多行文本
1)使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align: middle。
<div>
<table>
<tbody>
<tr>
<td class="td1">
<p>父元素高度</p>
<p>父元素高度</p>
<p>父元素高度</p>
<p>父元素高度</p>
<p>父元素高度</p>
</td>
</tr>
</tbody>
</table>
</div>
css代码：
.td1 {
height: 500px;
background: #cc0
}
运行效果：
td 标签默认情况下就默认设置了 vertical-align 为 middle，因此我们不需要设置
2）设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性
.div5 {
height: 300px;
background: #1F0;
display: table-cell;
vertical-align: middle
}
运行效果：
chrome、firefox 及 IE8 以上的浏览器下可以设置，IE6、7 并不支持这个样式， 兼容性比较差，只供大家学习参考。
3，隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display: none除外）设置以下2个句之一：
1. position: absolute
2. float: left 或 float: right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display: inline-block（内联块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
.div6 {
width: 300px;
height: 200px
}
.div6 a {
float: left; /*或 position: absolute*/
width: 100px;
background: #0cc
}
运行效果：
