一个div里面包含两个div,第二个子div有一个<a>标签，让这个<a>标签在第一个大的DIV垂直居中有哪些办法？

Question

想要这样的效果，这是用position做出来的，

除了用Position还有别的办法吗？用下面的代码为什么黄色背景部分会不在父元素里面？我想的是应该两个子div会并排排在父div里，因为用了inline-block，而且宽度和高度也没有超出父div

            <div class="user">
                <div class="user_head">
                    
                </div>
                <div class="user_name">
                    <a href="#">ABC123</a>
                </div>
            </div>

 .user{
        width: 260px;
        height: 100px;
        background-color: gray;
    }
    
    .user_head{ 
    width: 60px;
    height: 60px;
    background-color: #b9babe;
    
    margin: 20px 10px 20px 40px;
    display: inline-block;

    border-radius: 50%;
    box-shadow: 0 0 0 5px #2b2e3d inset;
    border: 2px solid #b9babe;       
}


   .user_name{
    display: inline-block;
    height: 100px;
    width: 60px;
    background-color: yellow;
    text-align: center;
}
.user_name a{
    line-height: 100px;
    text-align: center;
}

Answer 1

行高和高度一致可以使链接在父元素中居中。

至于为什么黄色背景部分不在父元素内，是因为浏览器默认的对齐方式是baseline的。

可以看到，由于你的user_head的margin属性，把基线往下撑开了，而又由于第二个div里有个a标签，最后结果是a里面的文字基于基线对齐。

如果你把a标签删掉，就可以看到第二个div跟被撑下去的基线是对齐的。
解决方法是把第二个的vertical-align属性设置为top就行了。

注：至于为什么同样没有设置vertical-align，对齐方式是基于元素内的a标签，而不是第二个div，我找不到相关说明，只能猜测浏览器默认处理就是如此。

Answer 2

单行文字垂直居中最简单的方法就是将父元素的height和line-height设成一样的高度，你可以试试。

Answer 3

试试这个

text-align: center;
line-height: height;

Answer 4

比如.user_name{ width:100px; height:100px; text-align:center; }
.user_name a{ line-height:100px; }