怎么让一个DIV绝对定位到页面的正中间

你想学习 HTML 和 CSS 吗？哈哈，我已经习惯了。
我之前刚开始的​​时候就这么做过。
我记得当时是2 01 5 年，我在深圳一家小公司做网页设计实习。
我当时真的很忙。
我刚刚在页面中创建了一个红色小方块，并正在考虑将其修复在屏幕中间。
但工作时间长了，我却感觉有些不对劲。

当时我也跟着你的脚步。
我先在content部分创建了一个div，然后放了一个叫fixed的类，然后在style标签里写了很多CSS代码，宽度为3 00px，高度为1 5 0px，背景为红色。
我还学到了一个新词叫position:fixed，把它想象成固定在屏幕上。

当时我很高兴，感觉自己学到了一项新技能。
我保存了文件并打开浏览器查看。
嘿，这个小方块确实是红色的，但它挂在屏幕的右下角，没有居中。
当时我并没有多想，以为是我没有设置正确。
然后网上搜了一下，发现必须添加属性 left:0;right:0;margin:0 auto;所以它可以位于屏幕的中间。

当时真的很困惑。
为了得到这个对焦效果，我在电脑前坐了好几个小时，终于搞定了。
在我心里是那么的美丽。
现在回想起来，以前一切都很简单，但那时我学到了很多。

对我来说，这些基础知识就像呼吸一样自然。
但说实话，有时候我还是很怀念那些时光。
哈哈，咱们别扯太远了。
您的 HTML 文件应该居中，应该没有问题。
记得多保存一些文件，不然突然关掉电脑就没用了。
如果还有其他问题请问我！

让DIV垂直居中

嘿，您希望 DIV 垂直居中，对吧？好吧，让我告诉你。

2 02 2 年的那个时候，我在前端工作的时候经常遇到这个问题。
主要有两个想法。

首先，使用绝对定位。
首先设置 DIV 的宽度（例如 2 00 像素）和高度（例如 1 00 像素）。
这是必须的，否则无法定位。

接下来，将 DIV 的位置属性设置为绝对。
这样一来，它就不再遵循正常的路线了。

然后是决定性的一步。
您设置并保留为 5 0%。
我记得当时在一个项目中尝试过，在一个 8 00px 宽的容器中。
这样放置后，DIV的左上角恰好到达了容器的中心交点。

但是！仅此一点还不够。
你必须把它成功。
如何？使用负边距。
如果你计算一下，宽度的一半是 1 00 像素，高度的一半是 5 0 像素。
然后将 margin-left 设置为 -1 00px，将 margin-top 设置为 -5 0px。
这样，DIV 就准确居中了。

这个方法挺经典的，但是有时候计算起来有点烦人。
特别是如果你的容器大小发生变化，你需要重新计算。

第二，利用变换。
这种方法现在被广泛使用。
您还可以设置 DIV 的宽度和高度，仍然是示例 2 00x1 00 像素。

然后为其添加样式并将其编写为转换：translate(-5 0%, -5 0%)。
这意味着 DIV 向左移动其宽度的一半，向上移动其高度的一半。
由于负号，它被撤回。

我在2 02 2 年北京的一个项目中使用了这个，效果非常好。
就几行代码，我就不写了。
主要优点是无论容器有多大，DIV都可以自动居中，而不必接触边框。

两种方法，选择哪一种就看你了。
绝对是老派点定位，时尚点转型。