<!DOCTYPE html>
<html>
<!--
This example HTML code shows how to perfectly center text of varying length horizontally and vertically.
Author: Michael Wen
http://michael.chtoen.com/
-->
<head>
<style type="text/css">
body
{
display: block; /* default display */
position: static; /* default position */
width: auto; /* we want the width to grow and shrink with the browser window */
height: auto; /* we want the height to grow and shrink with the browser window */
background: gray; /* we set the background color to gray so you can tell which part is body */
}
div.parent{
display: block; /* set display to block to allow setting width and height */
position: absolute; /* set position to absolute to center itself with 'top: 50%' and 'left: 50%' */
width: 400px; /* set this box's width */
height: 400px; /* set this box's height */
left: 50%; /* so it's horizontally centered */
top: 50%; /* so it's vertically centered */
margin-left: -200px; /* move the box left by half of its width so the box appears perfectly horizontally centered */
margin-top: -200px; /* move the box up by half of its height so the box appears perfectly vertically centered */
background: yellow; /* we set the background color to yellow so you can tell which box is div.parent */
}
div.child
{
display: block; /* set display to block to allow setting width and height */
position: absolute; /* set position to absolute to center itself with 'top: 50%' and 'left: 50%' */
width: 300px; /* set this box's width */
height: 200px; /* set this box's height */
left: 50%; /* so it's horizontally centered */
top: 50%; /* so it's vertically centered */
margin-left: -150px; /* move the box left by half of its width so the box appears perfectly horizontally centered */
margin-top: -100px; /* move the box up by half of its height so the box appears perfectly vertically centered */
background: green; /* we set the background color to green so you can tell which box is div.child */
}
div.textBox{
display: table-cell; /* 'vertical-align: middle;' works with 'display: table-cell;' and 'position: static;' Other combinations may or may not work! */
position: static; /* 'vertical-align: middle;' works with 'display: table-cell;' and 'position: static;' Other combinations may or may not work! */
height: inherit; /* inherit the height from div.child; no need to set it otherwise */
width: inherit; /* inherit the width from div.child; no need to set it otherwise */
vertical-align: middle; /* this is the KEY line that centers text vertically */
}
div.text{
display: block; /* margin works with 'display: block' */
position: static; /* no reason to set position otherwise */
height: auto; /* we want height to grow or shrink with the amount of text you put in this element! */
width: 200px; /* set the width lower than its parent so the box appears centered within its parent */
margin: 0 auto; /* centers this box horizontally */
text-align: center; /* centers the text within the box */
}
a:link,a:visited{
color:white;
font-weight:bold;
font-size:22px;
font-family:arial;
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>
<div class='textBox'>
<div class='text'>
<a target='_blank' href="http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Dbooks&field-keywords=css&tag=mesfafole-20">Find great CSS books on Amazon!</a>
</div>
</div>
</div>
</div>
</body>
</html>The following shows you the resulting of rendering this HTML in a web browser. Click How to Perfectly Center Text of Varying Length Vertically and Horizontally with CSS to go to this webpage in a new window so you an resize and play with it.To make some text centered vertically and horizontally we need to create a parent box and a child box and put text inside the child box. Here are the key styles of the parent box:
display: table-cell;
position: static;
vertical-align: middle;
You need to remember that vertical-align: middle only works with certain styles, and display: table-cell and position: static is one such combination. All together they make the child box vertically centered!
Note display: table tells the element to display as a table. Nested elements should be displayed as table-row and table-cell, mimicking the good old TRs and TDs.
Here are the key styles of the child box:
display: block;
height: auto;
margin: 0 auto;
margin:0 auto makes the child box horizontally centered.
As much counter intuitive as it is margin:auto 0 does NOT make the child box vertically centered!
Now you can put any text of any length inside div.text and the text will ALWAYS be centered within div.textBox!
You may be wondering why we cannot use absolute positioning method that we first introduced to center div.text. This is because that method REQUIRES that you specify height. Since we don't know how much height is occupied by the text inside div.text you aren't able to specify height. That's why we need to use height: auto but it breaks absolute positioned element; that's why we use display: table-cell and vertical-align: middle!
If you have any questions let me know and I will do my best to help you!
◀ How to Center an HTML Element with CSS
Posts
