TIL 26. 가운데 정렬 모음

Block || Inline 요소를 가운데 정렬하는 방법을 아는데로 모아보았다.

1. Margin

main {
  margin: 0 auto;
  width: 300px;
}

2. Display:

div {
  display: flex;
  flex-direction: column;
  align-items: center;  //column일땐 가로축 가운데정렬은 align-items 사용.
}

div {
  display: flex;
  justify-content: center; //row일때 가로축 가운데정렬
}

3. text-align

.test {
  text-align: center; //글씨 또는 인라인 요소 가운데 정렬
}

4. Position

const MainText = styled.section`
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%); //여기서 X=가로축의미
`;