left:50; transform: translateX(-50%);의 원리는 뭘까

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요

선택된 리스트 개수가 얼마 없을 때는  

이 버튼들이 박스 안에 잘 들어와있는데 

 

리스트가 많아질수록 점점 내려오고 

결국엔 밖으로 div 밖으로 나가 버린다 

 

  <div class="main-container-2">
  	<h3>Your Ingredients</h3>
  	<p id="noItem">No selected ingredients</p>
  	<ul id="urIngredients">

   	</ul>
  	<div class="link-ingredient hidden">
  		<button><a href="./fridge.html" class="link-fridge">to my fridge</a></button>
  		<button><a href="#" class="link-recipe">recipe</a></button>
  	</div>
  </div>

분명 button을 감싸는 div `link-ingredient` 는 선택된 재료 박스 부모 div `main-container-2` 안에 있는데도 

부모 div 밖으로 튀어나갈 수 있구나...를 알게 되었다 

지금 보니까 버튼들 뿐만아니라 리스트가 넘쳐 흐르는 문제점도 있다 

우선은 버튼부터 박스 안에 고정되게 처리해보자 

 

1️⃣ child div의 위치를 parent div 안에 고정시키기 

 

 ✅ 위치 고정하기

.link-ingredient {
    position: absolute;
    left: 0;
    bottom: 0;
}

 ✅ 가운데 정렬하기

원래라면 `text-align: center`를 사용하면 가운데로 정렬이 되는데 

`position: absolute` 를 줘서 document 흐름에서 빠져나와 있기 때문에 `text-align`이 적용이 안 된다

.link-ingredient {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
}

position이 absolute인 경우 

left: 50%

transform: translateX(-50%)를 주면 가운데 정렬이 된다 

짜잔!

 

 

그런데 

margin-left: auto; margin-right: auto; 처럼

왜 left: 50%; right: 50%;을 주면 가운데 정렬이 되지 않는 걸까 

 

찾아본 바로는 

margin-left: auto;
margin-right: auto;

left: 50%;
right: 50%;

이 둘은 다른 기준점을 가지고 있다고 한다 

margin-left와 margin-right는 그 원리가 잘 이해가 가지 않아서 아예 따로 주제를 빼서 블로그를 다시 작성해보려고 한다

 

 

우선 left: 50%; right: 50%;이 가운데 정렬이 되지 않고 

left: 50%;
transform: translateX(-50%);

right: 50% 대신 transform: translateX(-50%); 을 사용하는 이유에 대해서 알아보았다

 

설명만으로는 확 와닿지가 않아서 설명을 토대로 그림을 그려가며 이해를 해보았는데 어느 정도 정리가 된 느낌이다 ! 

 

이게 내가 이해한 원리이다

혹시 다르게 생각하는 분이 계시다면 의견 좀 남겨주세요

 

//비전공자가 혼자 공부하는 공간입니다 

//잘못된 정보가 있을 수 있어요