CSS - 가로세로 가운데 정렬

• position과 margin 

.position-margin {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

한 개의 엘레먼트가 있고 position 이 absolute일 경우 margin : auto는 먹히지 않는다.  top, left, right, bottom이 없기 때문이다. 바깥여백이 만들어지지 않았다는 이야기이다. 하지만 4방위 속성들을 모두 0으로 맞추면 바깥 여백이 생겨나 버린다. 이때 margin으로 auto 속성을 부여하면 정확히 가운데 정렬이된다.

• flex
  

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

상당히 애용하고 있는 가운데 정렬 방식이다.

 

• position과 transform

.position-transform {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

부모 기준으로 위 왼쪽에서 50퍼 떨어진다음 자신의 너비/높이의 50퍼 를 다시 역방향으로 오게한다.

 

• 텍스트 - line-height

span { line-height: 100px; }

line-height를 통해서 span의 높이를 부여할수 있다. 이때 너비/높이 가운데 정렬이 된다.

 

• 이미지

img {
  vertical-align: middle;
}

부모 기준으로 가운데 정렬이 이루어진다.

 

---

 

참고

 

stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally

Best way to center a

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/css/center.md

baeharam/Must-Know-About-Frontend