[CSS] 가운데 정렬 하기

[CSS] 가운데 정렬 하기

 

 

1. 이미지 가운데 정렬

<div class="container">

    <!-- 이미지 가운데 정렬 -->
    <img src="apple.jpg" id="img1">    

</div>

<style>
    #img1 {
        width: 200px;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
</style>

 

 

2. position absolute의 가운데 정렬

<div class="container">

    <!-- position:absolute 가운데 정렬 -->
    <img src="apple.jpg" id="img2">

</div>

<style>
    #img2 {
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 200px;
    }
</style>

 

 

3. 억지로 가운데 정렬

(relative 를 가진 부모에 대해 가운데 정렬)

<div class="container">

    <!-- 억지로 가운데 정렬 -->
    <div class="relativ-box">
        <img src="apple.jpg" id="img3">
    </div>

</div>

<style>
    .relativ-box {
        position: relative;
        width: auto;
        height: 200px;
        overflow: hidden;
    }
    
    #img3 {
        position: absolute;
        width: 200px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
</style>

 

 

 

 

 

참조

https://codingapple.com/course/html-basics/