[CSS] DIV안의 DIV를 세로 가운데 정렬하는 방법 2가지(2022 최신 작성)

개발자인 나에게 css는 여러모로 스트레스를 주는 요소이다. 그럼에도 한 가지를 어쩌다 배우게 되면, 아이러니하게도 또 나름의 재미를 줘서 애증의 관계라고 생각한다.

평소에는 복잡한 css를 작성할 일도 없고, 구글링과 table 태그를 사용해서 어려운 부분이 거의 쉽게 해결되기 때문에 문제가 없었다.

그러나 이번에는 프로젝트 상황이 좀 꼬여서, 개발을 위해 조금 복잡한 css를 작성해야할 일이 생겼다.

물론 이것도 다른 방식으로 쉽게 처리할 수 있었겠지만, 이상하게도 오늘은 싸움을 피하고 싶지 않았다...

물론 지원군이 없었다면 어김없이 패배했을 것이다.

 

아무튼 원하는 기능은 아래와 같다.

< 구조 도식화 >

WRAPPER div 가로 일렬 정렬 + CONTENT div 세로 가운데 정렬

 

< 코드 구성 >

<!-- style -->
<style>
    .container {
        border:1px solid red;
        width:100%;
    }
    .wrapper {
        border:1px solid black;
        border-radius:10%;
        width:100px;
        height:100px;
        text-align:center;
    }
    .content {
        border:1px solid blue;
        width:100%;
    }
</style>

<!-- HTML -->
<div class="container">

    <div class="wrapper">
        <div class="content">
            <p>제목</p>
            <p>내용</p>
            <button>확인</button>
        </div>
    </div>
    <div class="wrapper">
        <div class="content">
            <p>내용</p>
        </div>
    </div>
    
</div>

 

일단, 구현하려는 형태는 위와 같다.

전체 내용은 container class 속성의 div (깊이: 0 depth)로 둘러 싸여 있고,

그 안에 가로 일렬로 배치되어야 할 wrapper class 속성의 div (깊이: 1 depth)가 2개 존재한다.

그리고 wrapper class 속성의 div 안에 content class 속성의 div (깊이: 2 depth)가 각각 존재한다.

 

만약 1depth의 div나, 2depth의 div만 정렬하는 것이라면 문제가 안되었을 것이다.

그러나 1depth는 가로 일렬 정렬을 하고, 2depth는 세로 가운데 정렬을 하니 문제가 되었다.

특히, 2depth div 내부의 높이가 서로 달라 문제가 되었다.

 

그래서 이런 경우를 해결할 수 있는 2가지 방법을 공유하고자 한다.

 

반응형

 

[ 해결 방법 ]

 

1. display:inline-grid + align-content:center + vertical-align:middle 사용

 

구조 변경 없이 문제를 해결할 수 있기 때문에 이 방법을 추천한다.

크게 어려운 부분은 없다. 위의 wrapper class 스타일에 해당 css를 말그대로 추가만 해주면 된다.

 

.wrapper {
    border:1px solid black;
    border-radius:10%;
    width:100px;
    height:100px;
    text-align:center;
    display:inline-grid;
    align-content:center;
    vertical-align:middle;
}

 

퍼블리싱 작업되는 것을 보면, display:flex 속성이 잘 활용되는 것을 볼 수 있는데 flex는 한 방향(가로 or 세로)인 반면 grid는 두 방향(가로 and 세로)이라고 한다.

그렇기 때문에 flex로 설정할 시에는 content div 안의 내용이 가로로 inline 배치되는 것을 볼 수 있다.

이후, align-content:center 를 통해 wrapper div 내부를 가운데 정렬하고, vertical-align:middle을 통해 내부 div를 정렬하면서 어긋난 세로 정렬을 고쳐준다.

(css 전문가가 아니기에 정확한 해석은 아니다 ; 하나씩 적용 해보면서 출력되는 모양을 그대로 풀이하였다)

 

▼ GRID 속성에 대한 자세한 내용은 아래 링크 블로그 참조(1분 코딩 님이 잘 정리해주셨다)

이번에야말로 CSS Grid를 익혀보자

 

 

 

2. parent div 추가 + display:flex(parent) + display:inline-grid(wrapper) + align-content:center 사용

 

이 방법은 마크업 구조 변경이 있기 때문에, 구조 변경이 가능한 경우에 적용할 수 있는 방법이다.

우선 wrapper div를 새로운 div로 감싼다. 이 때 감싼 div가 상위 div이기 때문에 parent div라 칭하겠다.

HTML 구조는 다음과 같다.

 

<!-- HTML -->
<div class="container">

    <div class="parent">
        <div class="wrapper">
            <div class="content">
                <p>제목</p>
                <p>내용</p>
                <button>확인</button>
            </div>
        </div>
    </div>
    <div class="parent">
        <div class="wrapper">
            <div class="content">
                <p>내용</p>
            </div>
        </div>
    </div>
    
</div>

 

이후, 적용할 css는 다음과 같다.

 

.parent {
    display:flex;
}

.wrapper {
    border:1px solid black;
    border-radius:10%;
    width:100px;
    height:100px;
    text-align:center;
    display:inline-grid;
    align-content:center;
}

 

일단 적용하면서 바뀌는 모양을 통해 풀이해보자면, 상위인 parent div에서 display:flex 를 통해 가로 일렬로 정렬이 되도록 먼저 지정해놓은 후, wrapper div 내부(content div)를 display:inline-grid와 align-content:center를 통해 세로 가운데 정렬하는 방식이다.

 

이 2가지 방법을 통해서, 이중 div에서 가로 일렬 정렬 + 세로 가운데 정렬을 동시에 구현할 수 있다!

 

 

🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱‍🏍