[image] CSS - enter an Image (이미지 가운데정렬/중앙정렬)

img 자체 이용

img 요소를 display:block 속성 이용해 블럭요소로 만들고, margin 좌우를 auto 주면 됨.

<style>

img {

    display: block;

    margin-left: auto;

    margin-right: auto;

}

</style>

<div>

   <img src="https://i.imgur.com/WfW5mBC.png" alt="homzzang">

</div>

결과 보기

부모 요소 이용

[방법1] - 부모요소에 text-align:center 속성 추가.

 

<style>

div {

    text-align:center;

}

</style>

<div>

   <img src="https://i.imgur.com/WfW5mBC.png" alt="homzzang">

</div>

결과 보기

---

[방법2] - 부모요소에 flex 시스템 적용

 

<style>

div {

    display:flex;

    justify-content: center;  /* 가로 방향 중앙 정렬 */

    align-items: center;      /* 세로 방향 중앙 정렬 */

    height: 100vh;            /* 화면 전체 높이 사용 */

}

</style>

<div>

   <img src="https://i.imgur.com/WfW5mBC.png" alt="homzzang">

</div>

 

결과보기