注：以下demo都只是针对现代浏览器所做，未兼容低版本的IE以及其他非主流浏览器。
1.单行文本垂直水平居中<兼容所有浏览器>
HTML
1 <div class="button">
2 确定
3 </div>
CSS
.button{ height: 50px; line-height: 50px }补充：line-height的值不能设为100%；官网文档中给出的关于line-height取值为百分比时候的描述：基于当前字体尺寸的百分比行间距，所以大家就明白了，如果是百分比是相对于字体尺寸来讲的。
2.flex布局<flex兼容性>
HTML
1 <div class="wrapper">
2 <div class="content">世界那么大，我想去看看~</div>
3 </div>
CSS
.wrapper{
display: flex;
align-items: center;
width: 300px;
height: 300px;
background-color: #ddd;}
/*
设置元素垂直、水平居中
.wrapper{display: flex; align-items: center; justify-content: center; background-color: #ddd; width: 300px; height: 300px; }
*/
.content{ background-color: red;}补充：适用于被设置垂直/水平居中元素宽度和高度未知的情况
3.绝对定位 + transform<浏览器兼容性：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+>
HTML
1 <div class="wrapper">
2 <div class="content">
3 为中华之崛起而读书！
4 </div>
5 </div>
CSS
.wrapper{ width: 800px; height: 500px; position: relative; }
/* 元素垂直、水平居中 */
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
/*
元素水平居中
.content{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
元素垂直居中
.content{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
*/
补充：该方法不仅可设置元素垂直居中，还可设置元素的水平居中，主要适用于欲设置垂直/水平居中的元素，其宽度、高度未知的情况
4.绝对定位 + margin: auto; <兼容所有浏览器>
HTML
1 <div class="wrapper">
2 <div class="content">世界那么大，我想去看看~</div>
3 </div>
CSS
.wrapper{width: 300px; height: 300px; position: relative;}
.content{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 80px;
}
/*
设置元素垂直、水平居中
.content{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 80px;}
*/补充：适用于被设置垂直居中元素具有高度的情况
5.绝对定位 + 设置负margin值<兼容所有浏览器>
HTML
1 <div class="wrapper">
2 <div class="content">世界那么大，我想去看看~</div>
3 </div>
CSS
.wrapper{position: relative; width: 300px; height: 300px;}
.content{position: absolute; top: 50%; left: 50%; margin-top: -40px; width: 100px; height: 80px; }
/*
设置元素垂直、水平居中
.content{position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -50px; width: 100px; height: 80px;}
*/补充：适用于被设置垂直居中元素具有高度的情况
6. 父元素：display: table;
子元素： display: table-cell + vertical-align: middle;
HTML
1 <div class="wrapper">
2 <div class="content">世界那么大，我想去看看~</div>
3 </div>
CSS
.wrapper{display: table; width: 300px; height: 300px; }
.content{
display: table-cell;
vertical-align: middle;
}关于vertical-align啰嗦两句：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>这样的元素是不行的。
valign属性规定单元格中内容的垂直排列方式，语法：<td valign="value">，value的可能取值有四种：
top：对内容进行上对齐
middle：对内容进行居中对齐
bottom：对内容进行下对齐
baseline：基线对齐
关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果常常与 bottom 值相同。不过，如果文本的字号各不相同，那么 baseline 的效果会更好。
