方法一：

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;}
}

方法三

1.效果图

2.html

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

3.css

.line{width: 330px;height: 1px;border-top: 1px solid #a9aaa8;margin: 0 auto;margin-top: 50px;
}
h3{width: 100px;text-align: center;/* 关键点,利用定位让文字居中 */position: relative;margin: 0 auto;bottom: 14px;background-color: white;color: #a9aaa8;
}