Question

    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)

这是用于在视口中居中按钮的CSS代码。有人可以解释这是如何工作的吗？我发现它在网上的某个地方，它似乎工作，但我不需要保证金权利和转换。当然，代码在没有它们的情况下不起作用，但直觉上我觉得前三个应该足以使元素居中。我对CSS比较陌生，所以我知道这是否被认为是一个愚蠢的问题：）

Answer 1

看一下这篇文章：https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/。简单地使用css的前三行（位置，顶部和左侧）将使对象的左上角居中，这将使整个对象完全偏离中心。负平移分别将对象向上和向右移动一半的高度和宽度，这使得对象居中。事实上，我认为你甚至不需要保证金权利代码，但我可能错了。

这个CSS代码如何使元素工作？

1 个答案: