Vertical centering in CSS
세로 가운데 정렬을 하려면 absolute와 top:50% 속성을 이용해서 하는 방법이 많이 알려져 있었습니다.
그런데 그 방법이 좀 맘에 안들어서 새로운 방법을 생각해 봤는데 어디서나 잘 되려는지는 잘 모르겠네요.
Chorme에서 테스트 해 봤습니다.
<style
type="text/css">
#box1 {
background-color:blue;
min-height:150px;
text-align:center;
}
#box2 {
background-color:skyblue;
vertical-align:middle;
display:inline-block;
}
#box1:before {
content:"";
display:inline-block;
min-height:150px;
vertical-align:middle;
}
</style>
<div
id="box1"><div
id="box2">contents</div></div>
이렇게 작성하면 다음과 같이 나옵니다. Box2의 경우에는 inline-block 타입이라면 다른 박스도 들어갈 수 있습니다. 예를들면, img 라던가~
contents
