html - 垂直/水平居中伪元素的生成内容

Question

我想知道是否有人有任何技术来定位 css 生成的内容。例如:

.block {
  height: 150px;
  width: 150px;
  border: 1px solid black;
}
.block:after {
  content: "content";
}

<div class="block"></div>

我想将内容置于框的正中央，但我常用的技巧都不起作用。有任何想法吗？谢谢!

Answer 1

由于伪元素本质上是作为子元素添加的，因此一种选择是使用 flexbox layout .在父元素上添加display: flex，然后使用align-items:center实现垂直居中，使用justify-content:center实现水平居中.

.block {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block:after {
  content: "content";
}

<div class="block"></div>

或者，您也可以将元素相对绝对定位到父级并使用transform trick用于垂直/水平居中。

.block {
  height: 150px;
  width: 150px;
  border: 1px solid black;
  position: relative;
}
.block:after {
  content: "content";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

<div class="block"></div>