我有这样的代码：中心跨度垂直
a {
background: #A9A9A9;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
float: right;
text-align: center;
}
a span {
display: inline-block;
vertical-align: middle;
}<a href="#"><span>Center</span></a>我要垂直的span中心变成a是谁在position: absolute;。
使用position:relative跨越，给top:50%
a {
\t background: #A9A9A9;
\t display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
\t float: right;
\t text-align: center;
}
a span {
display: inline-block;
position: relative;
top: 50%;
transform: translate(0px, -50%);
}<a href="#"><span>Center</span></a>解决方案2：
使用display:table和display:table-cell。
a {
background: #A9A9A9;
display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
float: right;
text-align: center;
display:table;
}
a span {
display: table-cell;
vertical-align: middle;
}<a href="#"><span>Center</span></a>a {
\t background: #A9A9A9;
\t display: block;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
\t float: right;
\t text-align: center;
}
a span {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 50%;
bottom: 0;
height: 16px;
margin-top: -8px; /* height/2 */
}<a href="#"><span>Center</span></a>大使用案例Flexbox的。只要确保你检查供应商前缀和broswer支持：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
a {
\t background: #A9A9A9;
\t display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 50%;
}
a span {
}<a href="#"><span>Center</span></a>改变风格可以帮助你
a {
background: #A9A9A9;
display: table;
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 20%;
vertical-align: middle;
float: right;
text-align: center;
}
a span {
display: table-cell;
vertical-align: middle;
}
<a href="#"><span>Center</span></a>
变换不采取跨平台兼容性:(，但有趣的答案:) – Krish
转换是罚款IE9和 - http://caniuse.com/#feat=transforms2d –