如何将绝对定位的文本对齐到行的中心？

Question

<div class="input-fields">
  <div class="new">
    <div class="first-container">
  <form id="new-form" method="POST">
  <div class="label">
                    <span class="fas fa-envelope icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
    <div class="label">
                    <span class="far fa-id-card icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
   <div class="label">
                    <span class="fas fa-user-tag icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
    <div>
    </div>
    </div>
</div>
    <div>
    <span class="divide">or</span>
    </div>
<div class="login-field">
  <div class="second-container">
  <div class="label">
                    <span class="far fa-id-card icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
  <div class="label">
                    <span class="fas fa-key icon"></span>
                    <input type="email" name="email-address" class="form-input" placeholder=" ">
                </div>
      <div>
    </div>
  </div>

.fa-arrows-alt-h {
  font-size: 30px;
  color: #bbb;
}

.input-fields {
  display: flex;
  background: #F7F9F6;
}

.new {
  width: 50%;
  float: right;
  border-right: 1px dashed #e9e9e9;
}



.form-input {
    padding-left: 3.575rem;
    height: calc(2.25rem + 2px);
    font-size: 1.5rem;
}


.first-container {
  display: inline-block;
  float: right;
  padding-right: 30px;
}

.second-container {
  display: inline-block;
  padding-left: 30px;
}

.divide {
  position: absolute;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
  top: 20%;
}

我想对齐文本，“或”在垂直线的中间。

我使用了left: 50%或49%，然而，当我缩小响应测试的窗口大小时，它被打破了。

我不能使用'left:0；right: 0；因为我不知道文本的宽度(“or”)

如何在垂直线中间对齐单词“或”？

有人能帮帮忙吗？

非常感谢！:)

Answer 1

将这些样式添加到您的绝对定位跨度：

.divide{
  left: 50%;
  transform: translate(-50%);
}

它的工作原理请参阅此处的代码：https://codepen.io/arnavozil/pen/mdVyWGr

Answer 2

你遇到的问题是，你使用的是flexbox，同时你给了容器特定的宽度，相反，你可以使用justify-content : center

.fa-arrows-alt-h {
      font-size: 30px;
      color: #bbb;
    }

    .input-fields {
      justify-content: center;
    display: flex;
      display: flex;
      background: #F7F9F6;
    }

    .new {
      /* width: 50%; */
      /* float: right; */
      border-right: 1px dashed #e9e9e9;
    }



    .form-input {
      padding-left: 3.575rem;
      height: calc(2.25rem + 2px);
      font-size: 1.5rem;
    }


    .first-container {
      /* display: inline-block; */
      /* float: right; */
      padding-right: 30px;
    }

    .second-container {
      /* display: inline-block; */
      padding-left: 30px;
    }

    .divide {
      /* position: absolute; */
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      /* top: 20%; */
    } ```