css 이미지 가운데 정렬

 

코딩을 하다보면

가끔씩 이미지 중앙정렬을 검색하게 됩니다.

이게 외워서 하면 좋은데 잘 안외워져서... 걍 이곳에 남김!

 

첫번째 방법

<style>
    div {
        text-align: center;
    }
</style>
<div>
    <img src="img.jpg">
</div>

그런데 위 방법이 간혹 안되는 경우가 있는데

그럴땐
두번째 방법

img {
    margin: auto;
    display: block;
}

<div class="img">

   <img src="img.jpg">

</div>

margin auto 만으론 중앙정렬이 안됨!

그래서 블록으로 감싸줌

 

그리고 마지막 

세번째

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

세 번째 방법은 display flex를 사용하는 것입니다. 

display flex 만으론 작동하지 않아서 justify-content 라는  추가적인 속성을 줍니다.

 

우선 수평으로 가운데 정렬이고 

담번에 수직 가운데 정렬도 넣어놔야겠네요.

그것도 많이 사용하니 ㅋ