css) div안 이미지 가운데 정렬하기(수평 중앙, 수직 중앙)

1. text-align: center;

<div>와 같은 블록 레벨 컨테이너 안에 있을 때만 작동.

        <div class="item">
          <img src="./assets/img/tea.jpg" alt="차" />
        </div>

 

2. margin: auto;

margin: auto;는 인라인 요소에 영향을 미치지 않는 특징이 있다.

<img> 태그는 인라인 요소라 블록레벨로 바꾼 다음 margin: auto;를 적용해야한다.

img {
    margin: auto;
    display: block;
}

 

여기에서 너비를 주면 100%는 가득 차고  그 보다 낮으면 이미지 좌,우 마진이 빈 공간에 자리를 잡아 자동으로 가운데 정렬이 된다. 

덧), 개인적으로 이방법이 제일 편했다.

 

3.  display: flex;

컨테이너 요소에 text-align 속성을 사용했던 것 처럼 컨테이너에

display: flex를 사용하고  justify-content: center로 수평중앙 정렬한다.

여기서도 이미지가 공간의 100%를 차지하면 중앙정렬을 할 수가 없어서 그보다 작은 %로 width를 설정한다.

div {
    display: flex;
    justify-content: center;
}
img {
    width: 60%;
}

 

 

---

 

수직 중앙 정렬

4.  display: flex;  

컨테이너 높이가 1000px 이고 이미지 높이가 300px 일때,

div {
    display: flex;
    justify-content: center;
    height: 1000px;
}
img {
    width: 60%;
    height: 300px;
}

 

display: flex; 속성을 사용하면 align-items: center;  를  사용해 수직 중앙 정렬을 할 수 있다.

div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1000px;
}

 

 

 

5. position: absolute & transform 속성

또 다른 방법은 position과 transform 속성을 함께 사용하는 것이다.

1).  position: absolute; 부모, 자식 관계 설정.

먼저, 이미지의 position 속성을 static에서 absolute로 바꿔준다.

div {
    height: 800px;
    position: relative;
    background: red;
}
img {
    width: 80%;
    position: absolute;
}

 

부모요소인(기준점, 컨테이너요소) div에 position:relative; 속성을 주고 자식이 되는 img에 position: absolute; 준다.

2). Top & Left 속성 부여(위치)

이미지의 위와 왼쪽 속성을 50%로 설정하면 이미지의 시작 지점(좌상단)이 컨테이너의 중간이 된다.

img {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
}

3) Transform 속성 부여

2). 단계까지 적용하면 이미지의 일부가 컨테이너의 밖으로 빠져나오게 된다. 이 이미지를 다시 돌려놓아야 한다.

transform 속성으로 X축, Y축 모두 -50%를 적용하면 비로소 이미지가 중앙에 배치된다.

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

 

 

 

 

 

참고

블로거 - https://www.freecodecamp.org/korean/news/how-to-center-an-image-in-css/