如何在div内垂直居中div

Question

首先需要告诉你我正在使用这段代码:

https://jsfiddle.net/hbahar95/27/

  .text.ellipsis {
  position: relative;
  font-size: 14px;
  color: black;
  font-family: sans-serif;
  width: 250px; /* Could be anything you like. */
}

.text-concat {
  position: relative;
  display: inline-block;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* (Number of lines you want visible) * (line-height) */
  line-height: 1.2em;
  text-align:justify;
}

.text.ellipsis::after {
  content: "...";
  position: absolute;
  right: -12px; 
  bottom: 5px;
}

因为我需要为标题设置多行椭圆.这部分代码有效.

但是现在我需要在div中居中垂直div,这部分代码部分工作....我真的尝试了一切,但仍然无法解决问题.

你可以在这里看到实例:http://phpbb32.majordroid.com/index.php

在蓝色div内部一切都很好,但是由于某种原因,在白色div标题内部下沉,或者换句话说不是居中.

所以我希望你能帮助我在div里面垂直居中,它需要在IE8 +中工作

谢谢

Answer 1

Flexbox救援:

.outer { 
  border:3px solid black; 
  height:300px;
  
  /* Just set up the container element to use flexbox */
  display:flex;
  justify-content:center;
  align-items:center;
}
.inner { border:3px dashed green; height:100px; width:100px; }

<div class="outer">
  <div class="inner"></div>
</div>