html：
<svg id="svg1">
<polygon points="0,0 80,0 100,12 80,24 0,24 10,12" stroke="black" stroke-width="1" fill="blue" />
<a href="#">
<text dy='.3em' fill="red">你好</text>
</a>
</svg>
参考网站1:http://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/
参考网站2:http://www.html5party.com/2155.html
根据外文网站的方法设置text标签的
css为text-anchor(水平居中)和dominant-baseline(垂直居中)
没有达到想要的效果？
需求:
能否实现垂直居中的效果，即使文本字体数调整，或者字体像素调整，内容还是居中的效果。
求大神指导！
建议看看慕课网的走进svg的教程，你的问题这个视频给出了完整的解决方案 http://www.imooc.com/video/3778 不仅可以居中还能上下对齐
<!-- 设置width和height，后面才能相对定位 -->
<svg id="svg1" width="100" height="24">
<polygon points="0,0 80,0 100,12 80,24 0,24 10,12" stroke="black" stroke-width="1" fill="blue"></polygon>
<a href="#">
<!--
text-anchor="middle" 表示以文本的中点为基准定位
x="50%" 表示定位到图片宽度的50%处，也就是居中
y="50%" 表示文本底部在图片的中央
dy=".3em" 让文本的底部从图片的中央继续往下移0.3行，从而达到垂直居中
-->
<text x="50%" y="50%" dy=".3em" fill="red" text-anchor="middle">你好</text>
</a>
</svg>如果不想把大小定死的话，可以用viewBox="0 0 100 24"，反正就是要把图片内容的宽度指定出来，x=50%才知道中间在什么地方。