垂直中心::之後div

Question

我想垂直居中一個僞元素與它的父h1元素。我用transform: translate(0,-50%);來移動它，但它沒有正確對齊。在檢查開發人員工具中的元素時，我得到的h1高度爲37px，後者在-18.5px處正確計算。

關於我失蹤的任何想法？

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    color: white; 
 
    background-color: #000; 
 
    -webkit-text-size-adjust: 100%; 
 
     -ms-text-size-adjust: 100%; 
 
} 
 
.container { 
 
    max-width: 38rem; 
 
    padding-left: 1.5rem; 
 
    padding-right: 1.5rem; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
} 
 

 
h1 { 
 
    font-size: 2rem; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
h1::after { 
 
    z-index: -1; 
 
    transform: translate(0,-50%); 
 
    position:absolute; 
 
    display: block; 
 
    font-size: 2rem; 
 
    content: "Heading one"; 
 

 
}

<div class="container"> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <h1>Heading one</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
</div>

Answer 1

您需要設置top: 50%;垂直居中的文本。不要忘記使用絕對元素的左邊屬性，這樣在任何瀏覽器中都不會有問題。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    color: white; 
 
    background-color: #000; 
 
    -webkit-text-size-adjust: 100%; 
 
     -ms-text-size-adjust: 100%; 
 
} 
 
.container { 
 
    max-width: 38rem; 
 
    padding-left: 1.5rem; 
 
    padding-right: 1.5rem; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
} 
 

 
h1 { 
 
    font-size: 2rem; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
h1::after { 
 
    z-index: -1; 
 
    left: 0; 
 
    transform: translate(0,-50%); 
 
    position:absolute; 
 
    display: block; 
 
    font-size: 2rem; 
 
    /* Top 50% */ 
 
    top: 50%; 
 
    content: "Heading one"; 
 

 
}

<div class="container"> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <h1>Heading one</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
</div>

Answer 2

你可以嘗試<h1>元素上設置position: relative，然後:after僞元素上設置position: absolute。 完成後，您可以將該選擇器的top:屬性設置爲top: 50%，然後通過transform: translateY(-50%)（由於定位工作原因）取消該選項。

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    color: white; 
 
    background-color: #000; 
 
    -webkit-text-size-adjust: 100%; 
 
     -ms-text-size-adjust: 100%; 
 
} 
 
.container { 
 
    max-width: 38rem; 
 
    padding-left: 1.5rem; 
 
    padding-right: 1.5rem; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: hidden; 
 
} 
 

 
h1 { 
 
    font-size: 2rem; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
h1::after { 
 
    z-index: -1; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    position:absolute; 
 
    display: block; 
 
    font-size: 2rem; 
 
    content: "Heading one"; 
 

 
}

<div class="container"> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <h1>Heading one</h1> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
</div>

望着開發人員控制檯，僞元件坐在完全居中的<h1>標籤。