div中间的线条怎么设置?

Question

我现在有三个div, 现在需要给div内部设置线条, 并且线条垂直居中

Answer 1

用伪元素

div{
position:relative;
}
div::after{
position:absolute;
height:0;
width:100%;
........
}

Answer 2

<div class="fu">
    <div class="line"></div>
</div>

// 父级盒子
.fu {
    width: 300px;
    height: 200px;
    position: relative;
}
// 线条
.line {
    width: 100px;
    border-bottom: 1px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
}

实现效果:

Answer 3

1、如果是实线，可以给div设置一个1px的背景图

div {
  background-image: linear-gradient(transparent, transparent calc(50% - 0.5px), red  calc(50% - 0.5px),  red  calc(50% + 0.5px), transparent  calc(50% + 0.5px), transparent );
}

2、如果是虚线，则给div设置position:relative，然后加一个伪元素

div {
  position: relative;
  width: 200px;
  height: 100px;
}
div::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  border-top: 1px dashed red;
  transform: translateY(-50%);
}