Put a div in the middle of another div when height is in percent

Question

I have this side-pane. It's height is 80%. In this side-pane I have a text. I want this to always be in the middle.

Main div:

.simulation {
  height: 80%;
  width: 500px;
  border: 1px solid #ccc;
  box-shadow: 8px 8px 7px #A5A5A5;
  background: #FFF;
  position: absolute;
  top: 10px;
  z-index: 100;
  left: -450px;
  transition: 500ms ease all;
}

Sub div:

.simulation .simulation-content .simulation-bar .heading {
  position: relative;
  margin-top: 340px; /* How do I get this in the middle?? */
  -webkit-transform: rotate(-90deg);
}

I can't get the margin-top right when i express it in %.

Plunkr: http://plnkr.co/edit/Z8xZNYLNvShQDVPZMZgk?p=preview

I don't get it. ***How many times can this question be asked!?!*** — jbutler483, Mar 31 '15 at 07:56

score 2 · Accepted Answer · edited May 23 '17 at 11:56

You could align the child element vertically at the middle of the parent by positioning the child absolutely and a combination of top: 50% and transform: translateY(-50%).

In this particular instance — Example:

.simulation .simulation-content .simulation-bar .heading {
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(-30%, -50%) rotate(-90deg);
  -moz-transform: translate(-30%, -50%) rotate(-90deg);
  -ms-transform: translate(-30%, -50%) rotate(-90deg);
  -o-transform: translate(-30%, -50%) rotate(-90deg);
  transform: translate(-30%, -50%) rotate(-90deg);
}

An explanation can be found here:

How to center a "position: absolute" element

I was just writing about combining the transform property!! – jbutler483 Mar 31 '15 at 07:58 — jbutler483, Mar 31 '15 at 07:58

score 0 · Answer 2 · answered Mar 31 '15 at 08:04

0

You can use also flexboxes to achieve it. just add:

display: flex;
  flex-flow: column nowrap;
  justify-content: center;

to your "main-content"

answered Mar 31 '15 at 08:04

Alvaro Menéndez

8,499
3
34
54

Put a div in the middle of another div when height is in percent

2 Answers2