<!DOCTYPE html>
<html>
<head>
<title>垂直居中示例</title>
<style type="text/css">
.container{
width:100%;
height: 100px;
padding-left: 20px;
background-color: #cccccc;
position: relative;
}
.container span{
position: absolute;
top:50%;
transform: translate(0,-50%);
}
</style>
</head>
<body>
<div class="container">
<span>垂直居中的文本</span>
</div>
</body>
</html>