什么是CSS片段，以将子div的中心位置设为父div — [关闭]

Question

已关闭 。 这个问题需要更加集中。 它当前不接受答案。 了解更多 。

---

想改善这个问题吗？ 更新问题，使其仅通过编辑此帖子来关注一个问题。

4年前关闭。

我需要确切的CSS代码段，以使子div的中心位置成为父div。

Answer 1

您可以这样操作，而无需知道两个div的尺寸：

<div class="container">
    <div class="centered">
         [...]
    </div>
</div>

CSS：

.container {
    position: relative;
}

.centered {
    position: absolute;

    // Center upper left corner
    // Percentage is relative to width/height of parent container
    top: 50%;
    left: 50%;

    // Move centered element so its center is centered
    // Percentage is relative to width/height of centered element
    transform: translate(-50%, -50%);
}