使用css将文字在水平线中显示

方法一：

1.效果图

2.html

<!-- <div class="line">
                第三方登录
     </div> -->

3.css

/* 让文字在水平线中显示 */
 .line {
    display: flex;
    flex-direction: row;
    color: #ccc;
    font-size: 18px;
    font-weight: bolder;
}

.line:before,
.line:after {
    content: "";
    flex: 0.8 0.8;
    border-bottom: 2px solid #ccc;
    margin: auto;
}

方法二

1.效果图

2.html

<div class="divider">
                <p></p>
                <div class="divider-text">申请处理进度</div>
                <p></p>
            </div>

3.css

.divider{
    width: 100%;
    display: flex;
    p{
      width: 48%;
       height: 1px;
       border-top: 1px orange dashed;
      margin: 0;
      vertical-align: middle;
     }
    .divider-text{
      padding: 0 20px;
      color: orange;
      transform: translateY(-50%);
      display: inline-block;
      font-size: 17px;
    }
}