Dead Centre

We can combine the horizontal centring code with the vertical centring code to place our content in the exact centre of the page.

<style  type="text/css">
body, html {height: 100%;text-align:center;}
#tbl {margin:0 auto;width:200px;text-align:left;}
#tbl[id] {display: table; height: 100%;}
#cell[id] {display: table-cell; vertical-align: middle;}
<!--[if lte IE 7]><style type="text/css">
#tbl {position: absolute; top: 50%;}
#cell {position: relative; top: -50%;left: -50%;}

Note that because Internet Explorer is positioning the cell div relatively that we need to adjust the left position of the content to move it back to the centre of the page.

This sample page shows you what some dead centred text looks like in your browser.

The actual code to display our text dead centre on the page is then identical to that which we used to vertically centre the content.

<div id="tbl"><div id="cell">
our dead centre web page content goes here


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow