css伪类居中？

Question

如图，蓝色那条是伪类，“推荐”是文字，文字显然向上偏移了一点点，现在想让它们完美居中。

<p>推荐</p>

p {
    height: 42px;
    font-size: 14px;
    display: flex;
    align-items: center;
    border: 1px solid red;
    &:before {
        content: '';
        display: block;
        width: 3px;
        height: 14px;
        margin-right: 10px;
        background-color: #10ace5;
    }
}

求助，谢谢！

Answer 1

p{
    position:relative;
    
    &:before{
                            //position定位，和margin配合使用
        position:absolute;
        top:50%;
        margin-top:-7px;    // 负的1/2高度
        
                            //也可以用可以用css3 translate来实现 
       transform:translateY(-50%); 
       -webkit-transform:translateY(-50%);
       -moz-transform:translateY(-50%); 
                           //不同的浏览器兼容问题还要加上不同前缀..
    }
}