如何垂直对齐标签？

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;
}