How to center vertically div inside div

Question

First need to tell you that I am using this code:

  .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;
}

because I need to have multy-line ellipse for titles. And this part of code works.

but now I need to center vertically div inside div, and this part of code works partially.... I really tried everything but still cant fix the problem.

you can see here the live example: http://phpbb32.majordroid.com/index.php

Inside the blue div everything is fine, but below inside white div title for some reason sank, or in other words is not centered.

So I hope you can help me to center vertically div inside div, and it needs to work in IE8+

Thank you

add float:left; to your .list-inner { } class and then clear the next class element :) — divisionkiller, Apr 27 '17 at 15:12
if I do that, then it is not centered. You can try it through an inspector, and you'll see it move up. — bundy, Apr 27 '17 at 15:16
use css flexbox technique, it's pretty simple. Check this guide https://css-tricks.com/snippets/css/a-guide-to-flexbox/ . — divisionkiller, Apr 27 '17 at 15:18
okey you can use this cool forgotten technique :D -> add display: table; on the parent div then use display: table-cell; and verical-align:middle; on the child div and it is going to do the trick :) in most of the browser versions. — divisionkiller, Apr 29 '17 at 16:43

score 7 · Answer 1 · answered Apr 27 '17 at 15:13

7

Flexbox to the rescue:

.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>

answered Apr 27 '17 at 15:13

Scott Marcus

64,069
6
49
71

Try to separate your concerns from parent to children, specially when the child is an block level element- https://jsfiddle.net/88q8nwut/ (opposite from `text-align: center` i mean, where the concern is parent-related) – Roko C. Buljan Apr 27 '17 at 15:24

score -1 · Answer 2 · answered Apr 27 '17 at 15:11

.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>

How to center vertically div inside div

2 Answers2