1.固定宽高的DIV水平垂直居中
2.不固定宽高，通过before选择器实现的
3.不固定宽高，通过table布局实现的
4.不固定宽高，通过display:table实现的
5.不固定宽高，通过css3实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
</style>
</head>
<body>
<div style="position:relative;background: #00a0e9; 500px;height: 200px;">
<div style="position: absolute;background: #00cc66; 200px;height: 100px;left: 50%;top: 50%;margin-left: -100px;margin-top: -50px;"></div>
</div>
<div class="block" style="position:relative;text-align:center;background: #4b7ae9; 500px;height: 200px;">
<span>徐同保</span>
</div>
<table style=" 500px;height:200px;background: #609a54">
<tr>
<td style="text-align: center;vertical-align: middle;">
徐同保
</td>
</tr>
</table>
<div style="display: table; 500px;height:200px;background: #8e8e9a;">
<div style="display: table-cell;text-align: center;vertical-align: middle;">
徐同保
</div>
</div>
<div style="justify-content: center;align-items: center;display:flex;background:#da4939; 500px;height:200px;">
徐同保
</div>
</body>
</html>