在HTML中的两个垂直div之间添加圆

<div class="container">
  <div class="div1"></div>
  <div class="circle"></div>
  <div class="div2"></div>
</div>

.container {
  position: relative;
  height: 200px; /* 设置容器的高度 */
}

.div1, .div2 {
  height: 100px; /* 设置垂直div的高度 */
  background-color: #f1f1f1;
}

.circle {
  position: absolute;
  top: 50%; /* 将圆形元素垂直居中 */
  left: 50%; /* 将圆形元素水平居中 */
  transform: translate(-50%, -50%); /* 调整圆形元素的位置 */
  width: 100px; /* 设置圆形元素的宽度 */
  height: 100px; /* 设置圆形元素的高度 */
  border-radius: 50%; /* 将元素设置为圆形 */
  background-color: #ff0000; /* 设置圆形元素的背景颜色 */
}