将伪元素居中在父元素上并显示：table-cell

Question

我 go 如何将伪元素置于带有display: table-cell的元素上？ 我的尝试只是将它集中到带有display: table的父元素。

Answer 1

当您没有提供任何代码时，很难弄清楚您正在尝试做什么，您是否正在尝试做这样的事情？ 只需将其粘贴到 html 文档中

<style>
#table-container {
    display: table;
    padding: 5px;
}

.tr {
    display: table-row;
    padding: 10px;
}

.td {
    display: table-cell;
    padding: 10px;
    width: 100px;
    border: #000000 solid 1px;
    margin: 10px;
}
</style>
<div id="container">
    <div class="tr">
         <div class="td"></div>
         <div class="td"></div>
         <div class="td"></div>
    </div>
    <div class="tr">
         <div class="td"></div>
         <div class="td"></div>
         <div class="td"></div>
    </div>
</div>

Answer 2

要让伪元素从它的“拥有”元素中获取尺寸和定位等值，您必须设置它们的位置。

如果拥有元素的 position 没有设置，那么系统将搜索“备份”文档，直到它找到一个设置了 position 的祖先，并且相关的事情将被设置。

在这个作为演示的代码片段中，伪元素是绝对定位的，表格单元格本身是相对定位的。

 .parent { width: 20vmin; height: 20vmin; background: cyan; display: table; }.child { display: table-cell; position: relative; background: yellow; }.child::after { content: ''; width: 50%; height: 50%; background-color: pink; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div class="parent"> <div class="child"></div> </div>

Answer 3

我解决了。 诀窍是在每个处理元素及其伪元素居中的单元格中放置一个容器。