[CSS] flex를 이용한 가운데 정렬

제리·2021년 1월 7일
10

마크업에서 가장 많이 사용되는 수평,수직 가운데 정렬을 하는 방법에 대해 공유한다. 내가 사용하려고

<html>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

다음과 같이 여러 엘리먼트를 하나의 엘리먼트로 그룹화하여 중앙정렬이 필요한 경우가 종종 발생한다.

margin을 이용한 방법

<html>
    <style>
        .wrap{
            width: 100px;
            margin:0 auto;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>


가장 일반적인 방법은 상위 엘리먼트의 margin값을 0 auto를 주어서 왼쪽과 오른쪽을 자동으로 설정하여 중앙 정렬하는 방법이다.
여기서 단점은 상위 엘리먼트의 width값을 명시를 해주어야 적용이 된다는 것이다. 또한 수평정렬만 가능하다는 점..

flex를 이용한 수평 가운데 정렬

<html>
    <style>
        .wrap{
            display: flex;
            justify-content: center;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>


상위 엘리먼트를 flex로 바꾼뒤 justify-content의 값을 center로 주면 손쉽게 가운데 정렬을 할 수 있다. 이때, box들이 세로로 되어있다가 가로로 바뀐 이유는 flex-direction의 기본 값이 row로 되어 있기 때문이다.

<html>
    <style>
        .wrap{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>

따라서, flex-direction의 값을 column으로 설정하고 justify-content가 아닌 align-items 값을 center로 주면 처음 의도했던 수평정렬을 간편하게 구현할 수 있다.

flex를 이용한 수평, 수직 중앙 정렬

<html>
    <style>
        .wrap{
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
    <body>
        <div class="wrap">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </body>
</html>


마지막으로 화면내에 수평, 수직 중앙 정렬하는 방법이다. 먼저 상위 엘리먼트의 height값을 100%로 설정하여 작업범위를 넓히고 algin-items와 justify-content값 모두 center로 주면 수직,수평 정렬을 간편하게 구현할 수 있다.

끝!

참고
flexbox로 만들 수 있는 10가지 레이아웃

profile
흐릿한 잉크가 뚜렷한 기억보다 낫다

0개의 댓글