Vertical Content Centering With CSS

Vertical centering can be done. And it's actually fairly easy, although with a different technique than would be employed for horizontal centering.

Note: This article discussed vertical centering with the CSS position property. Another article, Vertically Align Content with CSS, discusses vertical centering with the display and vertical-align properties.

If the dimensions of the content to center are known and won't change, vertical centering is done with CSS. Otherwise, JavaScript is used in addition to the CSS.

(As an aside, if you are someone who doesn't mind using tables for things other than tabular data, content can be aligned in a table data cell with either the table attribute valign="middle")

The method discussed in this article uses the CSS position property.

The content to center has a position:absolute CSS style. The div the content is centered within has a position:relative CSS style.

Vertically Centering with Known Dimensions

Here is an example. The content to center vertically is the box with the gold background color. The div the content is vertically centered within has a blue border.

Here is the source code for the above demo. Notes follow.

<style type="text/css">
#demo-main-1 { 
   position:relative; 
   width:300px; 
   height:200px; 
   border:1px solid blue;
   }

#demo-content-1 { 
   height:90px;
   position:absolute;
   top:50%;
   margin-top:-45px; /* half of height */
   width:50px;
   background-color:gold;
   }
</style>

<div id="demo-main-1">
<div id="demo-content-1">
<!-- content for centered div -->
</div>
</div>

The items referenced here are this color in the above source code.

The example has two divs, one contained inside another.

The containing div has a demo-main-1 id. Its correspondingly-named CSS class contains the position:relative; definition. The position property is the only one required for this div. The rest are optional. Other properties may be added.

The inside div has a demo-content-1 id. Its correspondingly-named CSS class contains four required properties:

• height — The height of the div needs to be specified in order to determine the value of the margin-top property (see last item on this list).

• position:absolute — This position definition is used to place the div exactly. It causes the absolute position to be calculated from the first div with a position value other than "static" (which is why the containing div must have the position property).

• top — The 50% value for the top property brings the top of the div down to immediately below the halfway point. (Which is too far down by ½ of the inner div's height. See next item on list.)

• margin-top — The value of this property reduces the top margin by ½ of the inner div's height (note the negative value). The result, with the other items on this list, is vertical centering of the inner div within the containing div.

Here is an example of both vertical and horizontal centering using the above technique.

And here is the source code.

<style type="text/css">
#demo-main-2 { 
   position:relative; 
   width:300px; 
   height:200px; 
   border:1px solid blue;
   }

#demo-content-2 { 
   width:50px;
   height:90px;
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-25px; /* half of width */
   margin-top:-45px; /* half of height */
   background-color:gold;
   }
</style>

<div id="demo-main-2">
<div id="demo-content-2">
<!-- content for centered div -->
</div>
</div>

The inner div contains three CSS definitions not required in the first example. They are this color.

The three properties relate to width and horizontal positioning the same way the three corresponding height and vertical positioning properties do.

Vertically Centering with Variable Dimensions

When the height of the inner div is unknown or is subject to change, JavaScript can be used to do the centering.

Caveat: Some browsers will put the content slightly below center. The Vertically Align Content with CSS articles describes a method that's more consistent.

The JavaScript adjusts the value of the CSS margin-top property for the inside div. The adjustment vertically centers the inside div within the containing div.

Here is an example:

And here is the source code (scroll to bottom of code box to see the JavaScript). Notes follow.

<style type="text/css">
#main { 
   position:relative; 
   width:300px; 
   height:300px; 
   border:1px solid blue;
   }

#contentbox { 
   position:absolute;
   left:50%;
   top:50%;
   width:200px;
   margin-left:-100px; /* half of width */
   margin-top:0;
   border:1px dashed gold;
   }
</style>

<div id="main">
<div id="contentbox">
<p style="margin:10px; font-size:smaller;">
The content of this div can change, which may change the div's height.
</p>
<p style="text-align:center;">
<img src="//www.willmaster.com/images/wmlogo_icon.gif" style="height:50px; width:50px;" alt="Willmaster.com logo">
</p>
<p style="margin:10px; font-size:smaller;">
JavaScript below this div adjusts the div's vertical positioning when the page loads.
</p>
</div>
</div>

<script type="text/javascript">
var IDofDivToCenter = "contentbox"; // id value of div to center
var DivToAdjust = document.getElementById(IDofDivToCenter);
var HalfOfHeight = parseInt( parseInt(DivToAdjust.scrollHeight) / 2 );
DivToAdjust.style.marginTop = "-" + HalfOfHeight + "px";
</script>

The inside div has a fixed width, so the horizontal centering can be done without JavaScript. The height, however, is variable.

Only one change is required in the CSS, the margin-top:0; definition has a value of "0" (digit zero) instead of a negative number. The JavaScript adjusts the value to accomplish vertical centering.

The JavaScript needs to be located somewhere below the inside div. It may be below the containing div. It may even be at the bottom of the page. The reason is that the JavaScript will run as soon as the browser reads the code. Therefore, the inside div must already be available for the JavaScript to run successfully.

In the JavaScript is a place to specify the id value of the div to center, (the inside div). You'll see it in this color in both the JavaScript and in the div tag of the inside div.

Vertical centering of a variable height div can be implemented.

If the dimensions of the inside div are known and won't change, vertical centering can be done with CSS. Otherwise, use JavaScript in addition to the CSS.

Will Bontrager