无法垂直居中元素

Question

我正在尝试使文本在右侧垂直居中，但很难找到适用于所有浏览器的纯 CSS 解决方案。

.block 元素的高度应该是动态的，并扩展到最高子元素（当前为 .thing1）的大小。

请注意，如果可能的话，我宁愿避免使用表格等技巧，但无论如何都可以 post 这些解决方案。

另外，为什么元素不仅在底部，而且还略微向下移动？

.block {
  width: 500px;
  background: yellow;
}
.thing1 {
  height: 100px;
  width: 40%;
  background: blue;
  display: inline-block;
}
.thing2 {
  background: red;
  width: 60%;
  vertical-align: top;
  display: inline-block;
}

<div class='block'>
  <span class='thing1'></span><span class='thing2'>Hello world how are you today r u alrite m8 i think u r weak m8</span>
</div>

Answer 1

演示 - https://jsfiddle.net/victor_007/93hjyhs8/1/

为两个 inline-block 元素添加 vertical-align:middle

Answer 2

你可以使用新的很棒的 css flexbox,

.block {
  width: 500px;
  background: yellow;

  display: flex;
  align-items: center;
  justify-content: center;
}

Demo: https://jsfiddle.net/3y41ot0b/

无法垂直居中元素

Having trouble vertically centering an element

html

css

cross-browser

vertical-alignment