css. vertical center in absolute positioned DIV
css, html
Solution
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>
Problem
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 } ```