个人总结，如有错误请指出，有好的建议请留言。o(^▽^)o
一、margin:0 auto；text-align:center；line-height方法
<div id="divAuto">margin,text-align;水平居中</div>
/*
margin:0 auto; 设置块元素（或与之类似的元素）的水平居中
text-align:center;设置文本或img标签等一些内联对象（或与之类似的元素）的水平居中
line-height:;高度设置为容器的高度 实现单行文本垂直居中(伪居中)
overflow:hidden;为了防止内容超出容器或者产生自动换行
*/
#divAuto {
width:300px;
height:50px;
background-color:#ff6a00;
margin:0 auto;
text-align:center;
line-height:50px;
overflow:hidden;
}
二、div不设置高度，子元素padding填充
<div id="divPar">
<p>padding填充实现居中</p>
</div>
/*
div 不设置高度
padding:20px 0;使用padding值把div填充起来，是一种“看起来”的垂直居中方式，
这种方法应用的前提就是容器的高度必须是可伸缩的
*/
#divPar {
width:100px;
background-color:#00ff21;
}
#divPar p{
padding:20px 0;
}
三、display:table；display:table-cell; 元素表格化实现垂直居中
<div id="divBox">
<div id="divChild">table化，vertical-align:middle；实现垂直居中</div>
</div>
/*
使用table的方式实现元素垂直居中
父div的display设置为table
子div的display设置为table-cell
通过vertical-align:middle;实现元素垂直居中
缺点：IE8无效
*/
#divBox {
width:200px;
height:100px;
margin:10px auto;
background-color:#000000;
display:table;
text-align:center;
}
#divChild {
width:50px;
height:50px;
background-color:#ff6a00;
display:table-cell;
vertical-align:middle;
}
四、利用父元素相对定于，子元素绝对定位的方式实现
<div id="divRel">
<div id="divAbs">绝对定位</div>
</div>
/*
利用父元素相对定位 子元素绝对定位的方式实现子元素水平垂直居中
top:50%;left:50% 实现子元素左上角处在父元素的中心位置
margin设置宽高位负的子元素宽高的一半 实现子元素相对父元素水平垂直居中
缺点：没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
*/
#divRel {
width:500px;
height:200px;
position:relative;
background-color:#ffd800;
}
#divAbs {
width:100px;
height:50px;
position:absolute;
background-color:#4800ff;
text-align:center;
top:50%;
left:50%;
margin:-25px 0 0 -50px;
}
/*绝对居中 子元素的另一种实现方式*/
#divAbs {
width:100px;
height:50px;
position:absolute;
background-color:#4800ff;
text-align:center;
left:;/*-- left和right配对出现控制水平方向 --*/
right:;
top:;/*-- top和bottom配对出现控制垂直方向居中 --*/
bottom:;
margin:auto;/* 这句是必须的*/ }
五、使用一个div当填充元素实现子元素的垂直居中
<div id="parent">
<div id="zero">填充元素</div>
<div id="child">Content here</div>
</div>
/*这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;content 清除浮动，并显示在中间;
缺点：需要额外的空元素*/ #parent {width:800px;
height:300px;
border:1px solid #ccc;} #zero {
float:left;
height:50%;
margin-bottom:-100px;/*居中元素高度的一半*/
}
#child {
clear:left;/*清除浮动*/
height:200px;
background-color:#ff0000;
}
经验所限，暂时更新到这里...