div에서 vertical-align:middle 정렬

1. text-align:center 와 상하padding조절로 수직정렬

2. line-height 와 height 조합으로 수직정렬 : 한줄일 때

3. display:table-cell 과 vertical-align:middle 조합으로 수직정렬 : 지원안하는 구브라우저에서 문제됨. 모바일코딩 일때 사용 O.
아래는 핵을 사용하여 IE6~8도 표현 됨.

<style type="text/css">
    .wrap {display:table; height: 200px; *position:relative;}
    .wrap .block {display:table-cell; vertical-align:middle; *display:inline-block; *position:absolute; *top:50%;}
    .wrap .block .pro {*position:relative; *top:-50%;}
  </style>

<div class="wrap">
    <div class="block">
        <ul class="pro">
            <li>상품</li>
            <li>상품</li>
            <li>상품</li>
        </ul>
    </div>
</div>

5. 틀이되는 영역안에 가운데 정렬할 요소를 넣고 빈 span태그 하나를 형제요소로 더 넣어서 인라인블록에 높이 100%(픽셀계산해서 틀과 같이 잡아도 됨)잡고 vertical-align:middle 주는방식으로 합니다.
줄바꿈 방지해야 합니다.