垂直居中, inline element

dabblet.css

/**
 * 垂直居中, inline element
 */

/**
 * 元素内容是单行，并且其高度是固定不变，line-height=height
 */
 .center-text-trick {
  border: 1px solid;
  text-align: center;
  height: 50px;
  width: 600px;
  line-height: 50px;
  margin-bottom: 10px;
}

/**
 * flex
 */
 
.flex-center {
  display: flex;
  border: 1px solid;
  flex-direction: column;
  justify-content: center;
  width: 200px;
  height: 150px;
  resize: vertical;
}

.flex-center p {
  margin: 0;
  padding: 5px;
}

/**
 * display: table cell
 */
 .center-table {
  height: 100px;
  border: 1px solid;
  width: 200px;
  display:table;
  margin-top: 10px;
}

.center-table p {
  display: table-cell;
  vertical-align: middle;
}

dabblet.html

<div class="center-text-trick">line-height == height</div>

<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}