当我使用transform转换时，我的边框高度增加了1px以上，如何解决？

Question

我没有尝试使用transform：translate（-50％，-50％）;和top：50％;在垂直方向居中设置1px分隔符，但在垂直居中情况下可以正常工作但是我的分隔符高度增加了1px，所以我的分隔符总高度显示2px，因此可以解决该问题。此结构是固定的，请帮助我。

非常感谢。

.number {
  font-size: 50px;
  line-height: 56px;
  font-weight: bold;
}
.title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}
.separator-line {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 60%;
    background-color: #000;
    height: 1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container">
      <div class="row my-5">
        <div class="col-3 text-center px-3">
          <div class="position-relative mb-4">
              <span class="separator-line"></span>
              <div class="number">01</div>
          </div>
          <span class="d-block title mb-3">Completed Project</span>
          <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">02</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">03</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <div class="number">04</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
    </div>
  </div>
</section>

Answer 1

更改CSS使用transform: translateX(-50%);的.separator-line

.number {
  font-size: 50px;
  line-height: 56px;
  font-weight: bold;
}
.title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
}
.separator-line {
    position: absolute;
    top: 50%;
    left: calc(100% + 15px);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 60%;
    background-color: #000;
    height: 1px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
  <div class="container">
      <div class="row my-5">
        <div class="col-3 text-center px-3">
          <div class="position-relative mb-4">
              <span class="separator-line"></span>
              <div class="number">01</div>
          </div>
          <span class="d-block title mb-3">Completed Project</span>
          <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">02</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <span class="separator-line"></span>
                <div class="number">03</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
        <div class="col-3 text-center px-3">
            <div class="position-relative mb-4">
                <div class="number">04</div>
            </div>
            <span class="d-block title mb-3">Completed Project</span>
            <p class="px-4">Lorem ipsum is simply text of the printing typesetting Lorem.</p>
        </div>
    </div>
  </div>
</section>