divを使用して上下左右にセンタリング
.centered {position: fixed;top: 40%; left: 40%; margin-top: -50px;margin-left: -100px;}
→
サンプル１
divを使用してセマンティックにセンタリング
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.block {
text-align: center;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.sample1 {
display: inline-block;
vertical-align: middle;
}
→
サンプル2
divなどを使用しないでbody全体をセンタリング
html {overflow: hidden; height: 100%; }
body {overflow: auto; height: 100%; width: 600px; }
→
サンプル3
