Every developer has come across this problem—how do you get an element in the absolute center of the page? And, I don’t mean the center horizontally… I mean vertically as well. Using a margin:auto; to center horizontally, is old news. So, what if the content can be set to any size width or height? What if this object also has padding that is added on to its natural width? As you can see, positioning this element/content in the dead center of the page can be difficult. Can it be done with all the extra bells and whistles like padding? I am proud to present my, “How to Get an Element in the Absolute Center of the Page” tutorial.
The Wrapper and margin:auto;
First let me setup a basic HTML document to use for testing.
<html>
<head>
<title>How to Get an Element in the Absolute Center of the Page | GeebArt</title>
<style></style>
</head>
<body>
<div id="absCenter">
<div id="wrap"><#innerWrap><span>Absolute Center</span></div></div>
</div>
</body>
</html>
I included a style block in this HTML only because the amount of CSS we will be using will only be a couple lines long in total. Before we get into positioning an element horizontally, let’s first remove some styles from the classic <body> tag. (Most browsers have default styles for elements and this is always true for <body>.)
<style>
body{width:100%;float:left;height:100%;padding:0;margin:0;}
</style>
Next, let’s add styles to our outer-most content wrapper, “#absCenter”. The goal here is to place this content above everything else on the page. To do that, we need to give it a 100% width and height, float it left and give it a position:absolute;. In some cases (especially for IE) you may also have to give this element a left:0; and top:0; to make sure the absolutely positioned element stays stuck to the far left and top side of the page. Let’s add some styles…
<style>
body{width:100%;float:left;height:100%;padding:0;margin:0;}
#abscenter{float:left;width:100%;height:100%;position:absolute;top:0}
</style>
Next, lets create a container that will be the outer wrapper of our content. At this point we are going to define a width for this element. It could be a fluid like a percentage based width, but I am going to use a fixed amount for this tutorial, “400px”. You will also have to add a, “display:table” to this element. Yes… the good ol’ table from the 90′s and early 00′s.
<style>
body{width:100%;float:left;height:100%;padding:0;margin:0;}
#abscenter{float:left;width:100%;height:100%;position:absolute;top:0}
#absCenter > #wrap > #innerWrap{float:none;width:100%;height: 100%;background: #822;display: table-cell;vertical-align:middle}
</style>
Why a table? Well table cells are actually the only elements that can be centered vertically. Crazy, right? It is TRUE, and you will see the magic after adding the last bit of CSS. Don’t forget to add, “text-align:center;” to make your text dead center.
<style>
body{width:100%;float:left;height:100%;padding:0;margin:0;}
#abscenter{float:left;width:100%;height:100%;position:absolute;top:0}
#absCenter > #wrap > #innerWrap{float:none;width:100%;height: 100%;background: #822;display: table-cell;vertical-align:middle}
#absCenter > #wrap > #innerWrap > span{background:#888;display: block;width: 100%;text-align: center;padding:10px;/*-moz-box-sizing: border-box;-webkit-box-sizing:border-box;box-sizing:border-box*/}
</style>
You may notice that the, “Absolute Center” text is hugging its content box borders. Naturally you will want to add padding to give it more space. To prevent this box from going off-center in all browsers (in conjunction with using padding), you may need to uncomment the “box-sizing” styles. Padding is usually added after width has been declared, but with box-sizing set to border-box you can make the padding be included in the width. Pretty neat.
Unfortunately, this little CSS gem does not work in IE7 and lower. IE8 and 9 are supported! If your site is starting to lose IE7 browser visits, you may want to consider this method. Their are always javaScript/jQuery workarounds if this method does not suit your old browser needs.
That does it for my, How to Get an Element in the Absolute Center of the Page tutorial. If you have any questions, feel free to leave a comment below. Thanks for stopping by!
- Geeb
That does it for now. (FTFY)
Fixed. Thanks.
Here is another method for absolute center, but only if you know the size of the element you are centering. Basically its absolutely positioning the element, giving it a top and left of 50% and then offsetting its margins by half to put it in the center of the page. It’s less code but also less flexible.
Demo