I am facing a challenge with aligning a div of unknown height within a container that has a height set to 100%. My goal is to vertically align the inner div at 30% from the bottom of the outer div.
In a working example I tried, using middle successfully aligns the inner div in the vertical middle of the outer div. However, when I used 30%, it caused the inner div to extend outside the browser window!
Observations on "vertical-align: middle":
Issues with "vertical-align: 30%":
Why did this happen? And more importantly, how can I achieve the desired positioning for the inner div as indicated by the arrow?
Note: It's essential that the solution does not involve explicitly defining a height for the inner div.
Sample code:
<!doctype html>
<html>
<head>
<style type="text/css">
/* reset */
html, body {
margin:0;
padding:0;
}
html, body, #wrapper {
height: 100%;
}
#wrapper {
left: 0;
position: fixed;
text-align: center;
top: 0;
width: 100%;
}
#wrapper:before {
content: "";
display: inline-block;
height: 100%;
margin-right: 0;
vertical-align: middle; // or 30% <= change position here
width: 1px;
}
#header {
display: inline-block;
position: relative;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<header id="header">
<h1>Text</h1>
<p>More text</p>
</header>
</div>
</body>
</html>