CSS笔记-绝对位置的置中方法(position:absolute)

笔记观念

绝对位置

认识绝对位置的都知道，可以用它来让东西乱飘在页面的任何位置

只要使用top left right bottom 去设定就好

所以我们可以利用这个特性 让东西置中

子元素 父元素

大家也应该了解 绝对位置有父元素的概念 本身没有设定的话 就以上层为父元素
如果要设定父元素就要把其元素 写一个position: relative;
所以我们看到下面程式码就能理解

程式码

body {    position: relative;  //设定为父元素    width: 100vw; //全萤幕宽度    overflow: hidden; //隐藏横轴}.content{  position: absolute;  //给绝对位置  让我们设定它的位置  可以乱跑  left: 50%;  // 让它在body左边的50%  transform: translate(-50%, -50%);  // 这个是重点

transform: translate的意思跟作用到底在干嘛？

你可能会想说　「靠北，我已经设定让它在body左边的50%了，不就在中间了吗？」
错！我们很容易忽略一件事情，也就是我们要置中的元素本身有的长度。

如上图所示，其实要让他的话置中的话还要对于元素本身往左边偏移「一半」

往左边的话是-号，一半的话就会是-50%，所以才会使用到transform: translate
想要知道使用方式可以看下面MDN的图片

这边第一个参数是X轴 第二个是Y轴 会往上跑是因为Y轴也有-50%唷

这样子就很清楚了！想尝试的话也可以自己去玩：MDN

心得

事实上置中的方法很多，我们的前辈CSScoke大大(Amos)曾经就写过文章来教学了，
有兴趣研究更多种的话欢迎去爬一下文章
这边我们学一个实用的 记起来原理 就不会觉得这是很困难的效果了唷(ノ▼Д▼)ノ
我们之后的笔记见！