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

Question

我想知道是否有任何技巧可以定位CSS生成的内容。例如：

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

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

我想把内容居中放在盒子的正中央，但我的常规方法都不起作用。有什么建议吗？ 谢谢！

- seeonsee

Answer 1

由于伪元素本质上是作为子元素添加的，因此一种选择是使用flexbox布局。在父元素中添加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>

或者，您也可以将元素相对于父元素进行绝对定位，并使用变换技巧进行垂直/水平居中。

.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>

- Josh Crozier

Answer 2

你可以像在其他元素上一样使用position。确保你的伪元素内容具有display:block;，定义了width和height。从那里开始，你可以给它position:relative;和任何其他你需要的值。

http://codepen.io/RobErskine/pen/vLYZLd

- Rob Erskine

Answer 3

如果您只在该块中有文本，并且容器将是固定大小，您可以像这样做。我还建议阅读这篇文章https://css-tricks.com/centering-css-complete-guide/以了解更复杂的情况。

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

.block:after {
    content: "content";
    display:block;
    width:100%;
    text-align:center;
    line-height:150px;
}

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

- Steven Moran