中间文字，两边横线的简单实现

在做一个小demo的时候，有一个需求是中间文字，两边横线的分割线，这种是比较常见的一种分割线，下面的做法是一个个人觉得比较简单的实现方式，横线的长度也可以根据视窗的大小进行缩放。

<div class="line-box">
	<span class="line"></span>
	<span class="text">我是一条分割线</span>
	<span class="line"></span>
</div>

.line-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 40px auto;
}
.text{
  min-width: 120px;
  font-size: 14px;
  text-align: center;
}
.line{
  width: 40%;
  height: 1px;
  background-color: #ccc;
}

下图为实现效果

这个是缩小视窗后的效果