2016-04-14
css:テーブル配置(display: table)
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
.table {
position: absolute;
width: 100%;
height: 100%;
display: table;
table-layout: fixed;
}
.table-row {
display: table-row;
text-align: center;
vertical-align: middle;
line-height: 0;
background-color: lightyellow;
}
.table-cell {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid black;
}
.table-text {
display: inline;
font: bold 10em sans-serif;
}
</style>
</head>
<body style="margin: 0; padding: 0; overflow: hidden;">
<div class="table">
<div class="table-row">
<div class="table-cell">
<div class="table-text">テキスト1</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="table-text">テキスト2</div>
</div>
</div>
</div>
</body>
サンプル
以上