Vertically centre a div?

DezUk · 2 Aug 2012 at 16:05

Just making a very simple placement page. Would like to vertically centre the page using CSS, how can this be achieved?

Page is here

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Maintenance Page</title>
<style type="text/css">
body 	{

	background-color: #FFFFFF;
	color: #D50037;
	text-align: center;
}

#container 	{
	width: 100%;
	height: 520px;
	margin: auto;
}

.text {
	font-family: Interstate,Trebuchet MS,Arial,Helvetica,sans-serif;
        font-size: 10pt;
        font-weight: bold;
}
</style>

</head>
<body>
<div id="container">
<p align="center"><img src="release_update.png" align="center" alt="TalentSource is currently down due to scheduled maintenance." /></p>

<br />
<br />

<p class="text">This page is currently down due to scheduled maintenance.</p>
<p class="text">Please try again in 15 minutes.</p>

</div> <!--container closing div-->
</body>
</html>

Cheers

Dj_Jestar · 2 Aug 2012 at 16:40

Give your container a fixed height, then top: 50%, margin-top: -<half of the fixed height>.

DezUk · 2 Aug 2012 at 16:48

Cheers will give that a go

DezUk · 2 Aug 2012 at 16:52

Hmmm it’s cantered but when I resize the browser window it does not stay cantered?

Dj_Jestar · 2 Aug 2012 at 16:53

It should do because of the top:50% rule - though if you resize the browser to a size that is smaller than the height on the container it will stop shrinking and add scrollbars.

visibleman · 2 Aug 2012 at 17:08

Use display: table; and vertical-align: middle; (iirc you might run into issues with IE), alternatively used fixed margins or JS if vertically align div is dynamic.

Have a look at http://stackoverflow.com/questions/1909753/vertically-align-div-no-tables

Limenote · 3 Aug 2012 at 21:20

50% absolute and negative margin is the best cross compat solution, display: table has problems with older ie, be aware that any parent element set to position: relative will effect an absolute child.