Posted at

文字の縦横の中央配置

More than 3 years have passed since last update.

文字の縦横の中央配置を行いたい場面があるのだが、どうやればよいかわからなくなるので、メモ。


CSS

#wappper{

height:100%;
width:100%;
}
#center{
display: table;
width: 100%;
height: 100%;
}
#center_cell{
color: red;
text-align: center;
display: table-cell;
vertical-align: middle;
}



HTML

<div id="wappper">

<div id="center">
<div id="center_cell">
center
</div>
</div>
</div>

デモ

https://dl.dropboxusercontent.com/u/3482475/index.html