css. vertical center in absolute positioned DIV

Question

Im trying to vertical center children of an absolute positioned div with no luck. Anyone having a good solution for this? (whitout js).

<div class="title">
    <div>
        <span>03</span>
    </div>
    <h2>
        title
    </h2>
</div>

css:

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title div,h2 {
    //i want to center these two verical
}

That question provides you a lot of options just try and choose the one can suit your layout. — DaniP, Nov 20 '14 at 12:22

score 6 · Accepted Answer · answered Nov 20 '14 at 12:31

A modern way to go is like this (I recommend the extra div):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

</style>
</head>
<body>

<div class="title">
    <div class="title-inner">
        <div>
            <span>03</span>
        </div>
        <h2>
            title
        </h2>
    </div>
</div>

</body>
</html>

score 0 · Answer 2 · 2014-11-20T12:36:17.080

0

For vertically align you have to use vertical-align:middle try this i think you want something like that ?

*
{
margin:0;
padding:0;
}
.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
    display:table;
}

.vertically_algn {
    display:table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/qe8suw58/

edited Nov 20 '14 at 12:36

answered Nov 20 '14 at 12:22

Tried that. Almost works. Thing is that i want div and h2 under each other. not next to each other on one line. thanks! – user2952238 Nov 20 '14 at 12:24
then put h2 under div – Nov 20 '14 at 12:27

score 0 · Answer 3 · answered Nov 20 '14 at 12:23

You can do it using display table and table-cell. They are good when you don't know the height and width of the elements that you want to align vertical middle :)

* {
  margin: 0px;
}
.title {
  height: 100%;
  position: absolute;
  text-align: center;
  width: 100%;
  background: red;
  display: table;
}
.aligner {
  display: table-cell;
  vertical-align: middle;
}

<div class="title">
  <div class="aligner">
    <div>
      <span>03</span>
    </div>
    <h2>
        title
    </h2>
  </div>
</div>

css. vertical center in absolute positioned DIV

3 Answers3