[分享]css中a标签垂直居中

CSS中的a标签是常用的链接标签，我们经常需要将其垂直居中以美化页面。下面介绍几种实现方法。方法1：设置行高与height相等 a{ display:inlineblock; height:30px;...

CSS中的a标签是常用的链接标签，我们经常需要将其垂直居中以美化页面。下面介绍几种实现方法。

方法1：设置行高与height相等 
a{
display:inline-block;
height:30px;
line-height:30px;
} 

解释：将a标签设置为inline-block元素，再将height和line-height设置为相同的值，就可以实现垂直居中。

方法2：定位加负边距 
a{
display:inline-block;
position:relative;
top:50%;
transform:translateY(-50%);
} 

解释：将a标签设置为inline-block元素，将position设置为relative，top设置为50%，此时a标签会相对于其父元素向下移动50%的高度。再使用transform的translateY将其向上移动50%的高度以实现垂直居中。

方法3：绝对定位加父元素padding 
a{
position:absolute;
top:50%;
transform:translateY(-50%);
width:100%;
height:100%;
}
.parent{
position:relative;
padding-top:30px;
} 

解释：将a标签设置为absolute定位，再设置top为50%，使用transform的translateY将其向上移动50%的高度。其父元素设置为relative定位，再给其上方留出与a标签高度相同的padding即可。