筆記觀念

絕對位置

認識絕對位置的都知道，可以用它來讓東西亂飄在頁面的任何位置

只要使用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)曾經就寫過文章來教學了，
有興趣研究更多種的話歡迎去爬一下文章
這邊我們學一個實用的 記起來原理 就不會覺得這是很困難的效果了唷(ノ▼Д▼)ノ
我們之後的筆記見！