image.png

一般都是垂直方向居中的，很简单的一个功能

一般我们可以在父元素设置高度，然后子元素设置 line-height 为父元素高度的一半

<div class="content">
    <div class="line">我是内容</div>
</div>

.content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 100px;
    background-color: #ccc;
}

.line {
    line-height: 50px;
    padding-right: 12px;
    box-sizing: border-box;
    border-right: 3px solid #000;
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}

这里我们设置了一个 border-right，如图所示：

image.png