关于网页布局中标题文字压线居中的安全方法

如图所示，文字压线居中显示

html代码：

<div class="share-title">
<span class="share-title__line"></span>
<span class="share-title__text">分享</span>
</div>

css代码：

.share-title{
width: 1000px;
margin: 0 auto;
text-align: center;
background: #fff;
position: relative;
}
.share-title__line{
position: absolute;
top: 50%;
left:0;
right:0;
height: 1px;
background: #bce0ff;
}
.share-title__text{
font-size: 18px;
color: #9bd0ff;
position: relative;
padding: 0 20px;
background: #fff;
}

如果两侧有带修饰符，只需在

<div class="share-title">
<span class="share-title__line"></span>
<span class="part-title__text">
<span class="part-title__line-dot left-dot"></span>
<span>分享</span>
<span class="part-title__line-dot right-dot"></span>
</span>
</span>

CSS代码：

.part-title__line-dot{
position: absolute;
top: 20px;
background: url("../img/line-dot.png") no-repeat;
height: 7px;
width: 8px;
z-index: 2;
}
.left-dot{
left: 0;
}
.right-dot{
right: 0;
}

效果如图：