Html 绝对定心

最近我遇到了一种方法，用于将元素水平和垂直放置到中心。然而，我无法弄清楚每一处房产都在做什么。有人能给我解释一下设置

顶部：0、底部：0、左侧：0、右侧：0时的效果吗

（如果你能用外行的术语解释或提供一个说明性的图像，那就太好了。）

另外，将显示设置为表格有什么用


。绝对中心{
位置：绝对位置；
显示：表格；
高度：自动；
宽度：500px；
保证金：自动；
排名：0；
底部：0；
右：0；
左：0；
边框：实心1px红色；
}
这是什么魔法？
您可以将css简化为：


。绝对中心{
位置：绝对位置；
宽度：500px；
高度：100px；
保证金：自动；
排名：0；
底部：0；
右：0；
左：0；
边框：实心1px红色；
}
这是什么魔法？
让我们稍微打断一下：

如果您有以下CSS（我将其应用于当前标记）：

您可以看到
div.absolute-center
填充整个父元素（在本例中为
body
），只需设置所有属性
top
、
bottom
、
right
和
left

演示：

因此，当我们将
width
（另外
height
）添加到以前的CSS中时，元素的大小被限制为这个大小

演示：

最后是神奇的
边距：auto
，使元素居中

演示：
检查此。。。
HTML是

您只需要添加顶部和左侧位置并添加变换。
如果您不需要固定宽度，则可以从css中删除
宽度
，如果您希望在
p
中添加居中文本，也可以删除它。试试这个：


。绝对中心{
位置：绝对位置；
宽度：500px；
填充：50px0；
最高：50%；
左：50%；
边框：实心1px红色；
文本对齐：居中；
转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-o变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
显示：内联块；
垂直对齐：中间对齐；
}
asdsdada
为了配合joel的回答，使用了
显示：表格，因为它将允许p标签具有自动高度并扩展到其内部。如果您使用任何其他显示类型，它将使用
top:0和
底部：0这会将其扩展到容器的整个高度。我也回滚了，因为我注意到该编辑得到了审阅者的批准，他们太容易接受了。一个片段作为标题并不坏，而且肯定比一个语法错误的问题要好。谢谢你的回答！这如何回答最初的问题，即CSS提供的工作原理是什么？
.absolute-center {
    position:absolute;
    height: auto;
    margin: auto;
    background: red;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<p class="absolute-center"></p>

.absolute-center {
    margin: auto;
    background: red; 
    width: 100px;
    height: 100px;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}