1 reply [Last post]
Squire4Hire
Squire4Hire's picture
Offline
newbie
Last seen: 6 years 8 weeks ago
Timezone: GMT-6
Joined: 2014-04-04
Posts: 1
Points: 2

I'm hoping someone can help me out. I'm super new to HTML and CSS and the inability to debug drives me insane! I've been trying, to no avail, to vertically center a div within a div and to maintain a fluid design.

Here's what I have so far:

<!DOCTYPE html>
 
<html>
 
<head>
 
	<title></title>
 
	<link rel="stylesheet" href="normalize.css" />
<style>
	html, body{
		height: 100%;
		background: gray;
	}
 
	div.wrapper {
		width: 75%;
		height: 100%;
		background: white;
		margin: 0 auto;
	}
 
	header{
		width: 100%;
		height: 10%;
		background: salmon;
	}
 
	div.outer{
		text-align: center;
		height: 80%;
		width: 100%;
		background: yellow;	
	}
 
	section.main{
		  display: inline-block;
		  width: 200px;
		  height: 200px;
		  background: orange;
	}
 
	footer{
		width: 100%;
		height: 10%;
		background: teal;
	}
 
</style>
 
 
<body>
	<div class="wrapper">
		<header>
		</header>
 
		<div class="outer">
			<section class="main">
				test
			</section>
		</div>
 
		<footer>
		</footer>
	</div>
</body>
</html>

The idea is, obviously, to vertically center the orange box within the yellow box and enforce it to scale with the screen.

Any help would be hugely appreciated!

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 3 years 43 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

You can do this by creating

You can do this by creating your parent a table-cell with a vertical-align of middle.
I saved a jsfiddle for you here.

Hope this solved your problem.

Check Maximum Webdesign for your online solutions