要素を、縦中央に揃える方法。
通常普通のvertical-alignだけでは縦方向中央には揃わない。
HTML
<div id="wrapper">
<div id="contents">block要素</div>
</div>
position: absolute;を使う
CSS
#wrapper{
position: relative;
width: 200px;
height:200px;
background-color: #eee;
}
#contents{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 80px;
height:50px;
line-height:50px;
text-align:center;
background-color: #ccc;
}
※width, height指定必須。配置したい要素がimg
の時だけheight指定無しでもOK。
CSS3のtable-cellを使う
CSS
#wrapper{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background-color: #eee;
}
#contents{
text-align: center;
vertical-align: middle;
margin: 0 auto;
width: 80px;
height: 50px;
line-height: 50px;
background-color: #ccc;
}