纯css实现左右横线，文字自适应居中效果

可以使用伪元素 `::before` 和 `::after` 来实现左右横线，然后使用 flex 布局中的 `justify-content: center;` 和 `align-items: center;` 属性让文字自适应居中。以下是示例代码：

<div class="container">
  <span class="text">这是一段文字</span>
</div>

.container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 1px;
  background-color: black;
  top: 50%;
}

.container::before {
  left: 0;
}

.container::after {
  right: 0;
}

.text {
  padding: 0 20px;
}

在上述示例中，我们使用了 `.container::before` 和 `.container::after` 伪元素来实现左右横线，使用 `position: absolute;` 来让它们在 `.container` 中居中，并且使用 `width: 50%;` 来让左右横线各占一半的宽度。然后我们使用 flex 布局让 `.text` 中的文字自适应居中，并且使用 `padding: 0 20px;` 让文字与左右横线保持一定的间距。