html - 定位到超链接父级的中心

Question

我有一个看起来像这样的超链接:

<a id="addNew" class="newEvent" href="/html/addNew.html">
    <label class="add">+</label>    
</a>

这些的 CSS:

.newEvent {
    position: fixed;
    bottom: 6vw;    
    right: 6vw;
    height: 10vw;
    width: 10vw;
    border-radius: 50%;
    border-color: transparent;
    background-color: #ce0808;
    box-shadow: 3px 3px 5px #888888;    
    align-content: center;
}

.add {
    font-size: 6vw;
    color: #ffffff;
    position: relative;
}

没有明显的原因，+ 符号向左对齐。 请注意，我尝试了那些 text-align、margin: 0 auto 等我在网上找到的解决方案，但都没有用，我得到的最好的是水平居中，但是对齐到顶部。我需要帮助才能最终使 + 符号居中。

Answer 1

您省略了显示类型。我假设您想使用基于 align-items 的 flexbox？

.newEvent {
  position: fixed;
  bottom: 6vw;
  right: 6vw;
  height: 10vw;
  width: 10vw;
  border-radius: 50%;
  border-color: transparent;
  background-color: #ce0808;
  box-shadow: 3px 3px 5px #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.add {
  font-size: 6vw;
  color: #ffffff;
  position: relative;
}

<a id="addNew" class="newEvent" href="/html/addNew.html">
  <label class="add">+</label>
</a>