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>


サンプル


以上