CSS 이미지 세로로 정렬하기, 이미지 가운데 정렬하기

웹페이지에서 이미지의 비율을 유지하는 것은 중요하다.

이미지가 특정 영역에서 비율을 유지 하지 않으면 이렇게 이미지가 늘려서 보일 수가 있기 때문이다.

[세로로 늘려서 보여지는 예]

[가로로 늘려서 보여지는 예]

특히 쇼핑몰의 상품의 이미지가 이렇게 늘려보여지게 되면 치명적이다.

마치 티셔츠가 원피스 처럼 보여질 정도이기 때문이다.

그래서 이미지를 중앙정렬하는 방법을 알아보겠다.

첫번째 방법 position 활용

.item-img-area > img{
  position:absolute;
  max-width:100%; 
  max-height:100%;
  width:auto; 
  height:auto;
  margin:auto; 
  top:0; 
  bottom:0;
  left:0;
  right:0;
}

두번째 방법 flex 활용

.item-img-area {
    height: 50vw;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-img-area > img {
  max-width: 100%;
  max-height: 100%;
}

두번째 방법 line-height 활용


.item-img-area {
   width:150px; height:200px; 
   line-height:200px;
   text-align:center;
}
.item-img-area > img {
  max-width:100%;
  max-height:100%;
  vertical-align:middle;
}

결과는 이러합니다.