如何在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中垂直居中div，它需要在IE8+中工作

谢谢

Answer 1

.box {
  position: relative;
  width: 250px;
  height: 250px;
  background-color: #E4E4E4;
  margin: 30px;
}
.box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 150px;
}
.text.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="box">
  <div class="text ellipsis">lorem ipsum dolor sit amet</div>
</div>

Answer 2

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>