聚沙成塔，聚水成涓！
line-height
父元素高度确定的单行文本设置 height=line-height
body {
background: black;
}
.c2 {
height: 80px;
line-height: 80px;
width: 80px;
text-align: center;
background: red;
}
<body>
<div class="block">
123123
</div>
</body>
image.png
只是单行文本水平垂直居中，块级元素并没有
position:absolute 实现水平垂直居中方法一
使用position:absolute，设置 left、top、margin-left、margin-top
.c1 {
height: 300px;
width: 300px;
background: black;
position: relative;
}
.c2 {
height: 200px;
width: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;
}
<div class="c1">
<div class="c2">
</div>
</div>
image.png
特点：兼容性好，不过需固定宽高
注意：如果不设置c1 position为relative,则c2将基于根元素定位居中
position: absolute 实现水平垂直居中方法二
position:absolute,同时设置top/bottom/right/left
body {
background: black;
}
.block {
height: 200px;
width: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
image.png
特点： 可不用设置高宽，且兼容性好
position: fixed 可实现水平垂直居中方法一
使用position:fixed,同样设置left、top、margin-left、margin-top的属性
body {
background: black;
}
.block {
height: 200px;
width: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
background: red;
}
<body>
<div class="block">
</div>
</body>
特点：position:fixed; IE 不支持,且需固定宽高
position: fixed 实现水平垂直居中方法二
设置position:fixed ，同时设置left/right/top/bottom为0，margin:auto
body {
background: black;
}
.block {
height: 200px;
width: 200px;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
<body>
<div class="block">
</div>
</body>
特点： position:fixed IE 不支持，不过不需固定宽高
display: table-cell
display:table-cell属性使内容垂直居中
body {
background: black;
}
.block {
height: 200px;
width: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
background: red;
}
<body>
<div class="block">
123123
</div>
</body>
image.png
特点：使内容居中，块级元素不能居中
CSS3 display: -webkit-box
使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center
body {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background: black;
}
.block {
height: 200px;
width: 200px;
color: yellow;
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
background: red;
}
<body>
<div class="block">
<span>123123</span>
</div>
</body>
image.png
特点： 无需定宽高，行内和块级元素都可水平垂直居中！但CSS3 IE 兼容性要考虑
CSS3 transform:translate(x,y)
body {
background: black;
}
.block {
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: red;
}
<body>
<div class="block">
<span>123123</span>
</div>
</body>
image.png
特点： 无需固定宽高但只能使块级元素水平垂直居中！但CSS3 在 IE 兼容性需要考虑
