那么 直接 使用 line-height与设置的height 值相同即可以实现垂直居中，例如:
html中：
然后在css中:
即可实现span中，“这里是文字” 部分文字内容的垂直居中。
比使用padding-top 的兼容性和效果多要好很多。
span{display:blockwidht:宽度值自己定； text-align:center}这里是控制水平居中。
还可以 span{display:blockpadding:值 } 这里值 设置为相同的 就可以
如：padding: 0 10px水平居中 左右间距为10px
或者 padding:10px 0 上下垂直居中， 上下间距：10px；
亦或者： padding ：10px 上下左右各 10px
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
/*上下左右居中*/
#power > span{
height:50px /*对于center2必须指明高度*/
width: 200px /*对于center3必须要指明宽度*/
border: 1px solid red
margin: 10px 0
}
/*1. flex : ie等老式浏览器可能不支持*/
.center1{
display:flex
align-items:center
justify-content:center
}
/*2. line-height*/
.center2{
display:block
line-height: 50px
text-align:center
}
/*3. table-cell */
.center3{
display:table-cell
vertical-align:middle
text-align:center
}
</style>
</head>
<body>
<div id="power"></div>
<script src="../js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#power')
.append('<span class="center1">上下左右居中:center1</span>')
.append('<span class="center2">上下左右居中:center2</span>')
.append('<span class="center3">上下左右居中:center3</span>')
})
</script>
</body>
</html>
