如何垂直對齊標簽？

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