如何垂直对齐标签？

Question

我经常看到这种模式。

我可以使用它来使HTML标签居中对齐吗？

.pattern {
  top: 50%;
  transform: translateY(-50%);
}

究竟如何运作？

Answer 1

要回答有关定位功能的问题：-当您将元素设置为固定的顶部和左侧为50％时，这会将元素设置为以左上角在视口中的该位置显示。 因此，左上角垂直和水平居中。 但是只有左上角在视口内居中，因此其余样式将元素相对于该点居中。 通常，这是通过将元素平移其高度的50％和宽度的50％来完成的，因此，现在元素的中心处于居中位置。

以下内容说明了这一点：

  .centered{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);  
  }

在图片中显示（请原谅图像的模糊质量）

Answer 2

尝试这种方式：

 body{ margin:0; } .wrapper { position: relative; height: 100vh; } .pattern { top: 50%; transform: translateY(-50%); position:relative; } 

 <div class="wrapper"> <a class="pattern" href="#">Demo Text</a> </div> 

Answer 3

 *{margin:0; padding: 0;} .wrapper{ width: 100vw; height: 100vh; display: flex; align-items: center; } 

 <div class="wrapper"> <a href="#">Demo Text</a> </div> 

我建议使用flex 。

如果您想了解flex ，请尝试转到此处https://codepen.io/enxaneta/pen/adLPwv?q=flex&limit=all&type=type-pens

Answer 4

您可以使用flex将元素水平和垂直居中对齐。

请检查此https://jsfiddle.net/5sLef3pz/

<div class="flexbox-container">
    <div class="flex-item">flex item centered</div>
</div>

相关的CSS

.flexbox-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 300px;
    border: 1px solid;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
    justify-content: center;
}

.flex-item {
  flex: 0 0 auto;
}