我正在学习将元素居中到屏幕中间的多种方法。我刚刚发现了下面的代码，我正试图理解其工作原理背后的技术解释。
<body>
<div class="square"></div>
</body>
.square{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: pink;
height: 50px;
width: 50px;
}
起初，我认为如果顶部和底部都为零，元素将垂直居中于屏幕。此外，如果left和right都为零，则元素将水平居中于屏幕上。但这一切都离不开margin: auto。你能告诉我margin和top, bottom, left and right是如何相互作用的吗?
这个div位于中间，因为你已经将外边距设置为auto。当你将边距设置为自动时，它将计算从所有方向的距离，无论它是上、下、左还是右。到每个点的距离是一样的，这就是为什么div在中间。
例如，如果我们要在网页中间水平居中，我们给网页的页边距像这样。
body {
margin:0 auto;
}
这将使body与左右两边的距离相等，但是它将给上下留出0的边距。
margin
margin属性实际上是以下各个margin属性的简写属性:
- margin-top
- margin-right
- margin-bottom
- margin-left
在margin auto中，元素将占用指定的宽度，剩余的空间将在左右边距之间平均分配，类似于顶部和底部。
首先您需要了解margin: auto;的作用。通过设置margin-left: auto;将占据屏幕的右侧整个空间，元素被滑动到屏幕的右侧和margin-right: auto;将占据右边的整个边距，元素被滑到左边有一点要记住，顶部和底部的边距不起作用当我们使用margin: auto;时，这意味着我们让元素从左到右占据相等的边距，并在中心(水平)对齐
进一步，你可以使用左，右，底部和顶部定位只有当margin: auto;被打开
- : 0;//表示从顶部开始的距为0并且元素固定在顶部
- 底:0;//表示从底部距为0，元素固定在底部
与left和right的情况相同当我们同时使用它们时，这意味着我们指定每个元素在每个左，右，底部和顶部位置拉伸，这只有当元素的宽度等于屏幕
时才有可能。元素可以水平和垂直对齐
如需进一步指导，请参阅以下文档:https://www.hongkiat.com/blog/css-margin-auto/