如何用CSS实现两侧横线中间带圆圈的响应式效果？

用Flex布局就能轻松实现完全响应式的效果，无需复杂计算或定位，代码示例如下：

HTML结构 #

<div class="line-circle-divider">
  <span class="center-circle"></span>
</div>

CSS样式 #

.line-circle-divider {
  display: flex;
  align-items: center;
  width: 100%; /* 自动适配父容器宽度 */
  margin: 20px 0;
}

/* 左右两侧的横线 */
.line-circle-divider::before,
.line-circle-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ddd; /* 可自定义横线颜色 */
}

/* 横线与圆圈的间距 */
.line-circle-divider::before {
  margin-right: 15px;
}
.line-circle-divider::after {
  margin-left: 15px;
}

/* 中间的圆圈 */
.center-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ddd; /* 圆圈边框样式 */
  background-color: #fff; /* 匹配页面背景色，避免和横线视觉重叠 */
}

效果说明 #

• Flex布局让左右横线自动平分容器内除圆圈外的剩余空间，无论父容器宽度如何变化，横线都会自适应拉伸，圆圈始终保持居中，完全适配响应式需求。
• 可通过修改margin调整横线与圆圈的间距，修改宽高、边框样式自定义圆圈外观，修改background-color调整横线颜色。
• 避免了固定宽度、绝对定位等方案带来的错位、溢出问题。

内容的提问来源于stack exchange，提问作者rosafa