실무에서 작업을 하다보면 의외로 수직중앙정렬을 사용할 때가 많았다.

하지만, 제대로 이해를 하고있지 않으면 꽤 어렵다고 생각하기 때문에 다시한번 정리하는 시간을 가졌다.

여러 블로그를 돌아다녔지만, 내가 생각했을때 가장 많이 쓰일 것 같은 코드들로만 정리했다.

vertical-align 특징

1. inline이나 inline-block 요소에만 적용 됨

2. 요소 자체만을 정렬하고, 내용에는 영향을 미치지 않음. (table-cell에 적용할 땐 제외)

3. table-cell에 적용할 때는 내용에 영향을 미침

4. vertical-align은 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬함.
   같은 줄에서 인라인 요소의 크기에 따라 높낮이가 달라질 수 있고, 그 줄에있는
   line-height 설정에 따라서도 달라질 수 있음.

수직중앙정렬 코드 정리

1. display:table을 활용한 정렬방식

 <div id="table">
    <div class="table-cell">
   	 테이블 속성으로 중앙정렬하기
    </div>
 </div>
 <style>
    #table{
    display:table;
    height:200px;
    background:#999
    }
    #table .table-cell{
    display:table-cell;
    vertical-align:middle
    }
 </style>

2. line-height속성 사용
   주의 : 오직 한줄짜리 텍스트만 수직정렬이 가능하다.

 <div class="line-height">
	line-height로 수직중앙정렬하기
 </div>
 <style>
    .line-height{
    height:240px;
    line-height:239px;
    background:#888;
    }
 </style>

3.margin과 position을 이용한 방식

<div class="margin_box">
        <div class="margin">
            margin으로 수직중앙정렬하기
        </div>
    </div>
<style>
 .margin_box{
    position:relative;
    width:200px;height:200px;
    background:#888
 }
 .margin{
    position:absolute;
    width:100px;
    height:100px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background:#444
 }
</style>

4. 이미지태그 수직정렬하기

 <div class="logo_box">
    <span>안녕?</span>
    <img class="logo" src="epsheader/images/img_logo.png" alt="">
 </div>

4번 예제에선 구지 텍스트가 필요하지 않지만, 다른 컨텐츠가 있을때의 경우도 같이 살펴보았다.
먼저 "안녕?" 이란 텍스트의 태그는 으로 inline태그를 사용했다.
그 이유는 위에서 언급했듯이 vertical-align은 inline 혹은 inline-block일 때만 사용이 가능하기 때문이다.

참고 사이트 : https://includestdio.tistory.com/2
https://aboooks.tistory.com/180
https://blog.asamaru.net/2017/04/04/css-image-vertical-center/

실제 코딩된 사이트 : http://pub.ziten.co.kr/pub_hong/vertical-align.html