縦中心:: divの後

Question

私は親のh1要素を使ってafter擬似要素を垂直に中央に配置しようとしています。私はそれを移動するために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>タグを中心に座っています。