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%;设置为垂直居中文本。不要忘记将left属性与绝对元素一起使用，这样就不会在任何浏览器中出现问题。

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

您可以尝试在position: relative元素上设置<h1>，然后在position: absolute伪元素上设置:after。完成后，您可以将该选择器的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>标记为中心。

垂直中心::在div之后

2 个答案: