垂直中心::之后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>标签。