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

Question

我尝试使用 transform: translate(-50%, -50%); 将 1px separator 设置为垂直居中top: 50%; 但垂直居中工作正常但我的分隔符高度增加了 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>

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

When i use transform translate than my border height increase more 1px how to solve it?

html

css

vertical-alignment