[css] 정중앙 정렬2

과거에 element 정중앙 정렬에 대해서 포스팅을 한적이 있다.

jintrue.tistory.com/entry/css%EB%A1%9C%EB%A7%8C-%EC%A0%95%EC%A4%91%EC%95%99%EC%A0%95%EB%A0%AC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[CSS] 중앙정렬

 

이 포스팅의 연장선으로 크로스브라우징까지 고려한 스타일을 짜보았다.

 

아래 스타일은 element 자신의 정중앙 정렬일 경우이다.

 

.center-box {
  width: 191px;
  height: 129px;
  position: absolute;
  right: 412px;
  bottom: 137px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  letter-spacing: -1px;
  text-align: center;
  display: -ms-flexbox;
  display: -webkit-box;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

보통 align-items 까지는 외워서 코딩을 하는데 매번 div 정중앙 정렬을 스타일 할때마다 justify-content: center;를 까먹곤한다. 

아래와 같이 크로스브라우징을 고려한 justify-content: center;를 해야 가로 중앙 정렬도 가능해질 것이다. 

-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;

자기 자신에게 display:flex; 속성을 사용하여 중앙정렬을 하고자 할 때 가로 중앙 정렬은 text-align: center;로 안된다.