Vertical center align by CSS in HTML

# Vertical center align by CSS in HTML HTML 의 div element 특성상 height 의 경우 child element 들의 height 가 다 계산이 되고 이것을 포함하는 식으로 height 가 정해져서 vertical align 한다는게 생각보다 쉽지가/간단하지가 않음. 그냥 단순하게 생각해보면 대충 <div style="vertical-align:center/middle"></div> 이런 CSS 만 넣으면 세로 가운데 정렬이 될것 같지만 제대로 동작하지 않음. (이렇게 동작하도록 browser 들이 만들어줘도 될거 같은데 말이지 ㅡ..ㅡ) 아무튼 여러가지 방법들이 검색에 걸리긴 하는데 모든 browser 에서 제대로 동작하는 건 별로 없는듯? =ㅇ=;;; 찾기 힘들다. 우선 대충만 정리해놓고 나중에 다시 정리하겠음. ## TOC ## Using flexbox Chrome 하고 Firefox 에서만 먹히는듯? IE 에선 세로길이가 100% 로 만들어지고 (height 길이를 고정시키면 먹히긴 하는듯.). Safari 에서는 아예 안먹힘.

Finally, it's easy to vertically center something in CSS!
abcd
efgh
ijkl

### Flex examples

Home
Taco Menu
Draft List
Hours
Directions
Contact

Flexbox is so easy!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.

## Using "transform:translateY(-50%)" Safari 에선 안먹힘 ㅡ..ㅡ;;;

element
multiple line
abcd
efgh

## javascript 이용 Cross browser 를 위해서는 javascript 를 이용할수밖에 없는듯도.

element
multiple line
abcd
efgh

img 의 경우 load 가 다 되어야만 width, height 정보를 알 수 있기 때문에 다음과 같이 on("load") handler 를 이용함.

## RRA

1. ko.learnlayout.com - flexbox;
   MDN - Using CSS flexible boxes
2. zerosixthree.se - Vertical align anything with just 3 lines of CSS, 2014-01-13