Centering the content of a page with CSS
Centering horizontally and align vertically a DIV on the page is one of the hottest subjects of CSS developers community. I will present today the solution I am using successfully when I want the content of a page to be perfectly centered horizontally and vertically in browser.
This method is working cross browsers and I am using valid CSS. You can use this method all the time you need to center the content of a page.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centered Content</title>
<!--[if lte IE 8]>
<style type="text/css">
#outer{display:block;}
#container{top:50%;display:block;}
#inner{top:-50%;position:relative;}
</style>
< ![endif]-->
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;}
</style>
< ![endif]-->
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0
}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:left;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:#fff;
height: 552px;
text-align: center;
margin-left:auto;
margin-right:auto;
border: 2px solid #0789F8;
}
p {
padding:10px;
text-align:left
}
</style>
</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<p>This DIV will appear in the center of the page in any browser! Enlarge the browser window and then make it smaller to see how this box is staying centrally on the page. I recommend you to use this method anytime you want centering a DIV box on a page. I am using valid XHTML and CSS 2.1. Thanks for visiting my blog. Hope you find the answers you need!</p>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Centered Content</title>
<!--[if lte IE 8]>
<style type="text/css">
#outer{display:block;}
#container{top:50%;display:block;}
#inner{top:-50%;position:relative;}
</style>
< ![endif]-->
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;}
</style>
< ![endif]-->
<style type="text/css">
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0
}
/* mac hide \*/
html,body{height:100%;width:100%;}
/* end hide */
body {
text-align:left;
min-height:468px;/* for good browsers*/
min-width:552px;/* for good browsers*/
}
#outer {
height:100%;
width:100%;
display:table;
vertical-align:middle;
}
#container {
text-align: left;
position:relative;
vertical-align:middle;
display:table-cell;
height: 468px;
}
#inner {
width: 552px;
background:#fff;
height: 552px;
text-align: center;
margin-left:auto;
margin-right:auto;
border: 2px solid #0789F8;
}
p {
padding:10px;
text-align:left
}
</style>
</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<p>This DIV will appear in the center of the page in any browser! Enlarge the browser window and then make it smaller to see how this box is staying centrally on the page. I recommend you to use this method anytime you want centering a DIV box on a page. I am using valid XHTML and CSS 2.1. Thanks for visiting my blog. Hope you find the answers you need!</p>
</div>
</div>
</div>
</body>
</html>
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
