<!DOCTYPE html>
<html>
<!--
This example HTML code shows how to perfectly center a block element 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 */
}
img{
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: 140px; /* set this box's width to be the same as the actual image's width */
height: 35px; /* set this box's height to be the same as the actual image's height */
left: 50%; /* so it's horizontally centered */
top: 50%; /* so it's vertically centered */
margin-left: -70px; /* move the box left by half of its width so the box appears perfectly horizontally centered */
margin-top: -17px; /* move the box up by half of its height so the box appears perfectly vertically centered */
}
</style>
</head>
<body>
<div class='parent'>
<div class='child'>
<a target='_blank' href="http://www.amazon.com/s/ref=nb_sb_noss?url=search-alias%3Dbooks&field-keywords=css&tag=mesfafole-20"><img src="https://omifile.chtoen.com/amazon-button.gif" /></a>
</div>
</div>
</body>
</html>This example shows you how to perfectly center a block element horizontally and vertically! As you can see you have a 400x400 box centered in the browser window, within it you have a 300x200 box centered, within it you have an image centered.The following shows you the results of rendering this HTML code in a web browser. Click How to Perfectly Center a Block Element Vertically and Horizontally with CSS to open this webpage in a new window so you can resize it to see how the boxes move.
In summary to make a block element centered in its parent you need to set the following styles for the child element:
display: block;
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
We are placing a 400px by 400px box at a place which is half the parent's height away from the top and half the parent's width away from the left. Then we move the box left by half of its width and move the box up by half of its height so that the box is truly centered inside the parent.
Note the box's parent MUST set some width and height so you see the effect of centering the box. In our example the body's width and height are set to auto meaning they shrink and grow with the browser window. In div.parent box the width and height are set to a specific value so that you can see how div.child box is centered.
Since the img tag can be made a block element, we simply style img tag accordingly to center it perfectly within its parent's container. Easy right? Questions?
A prerequisite is this element does NOT change dynamically! Suppose you want to center a block of text and the text can be changed via Javascript and you want the centering to work dynamically regardless of the length of text. Read the next section!
If you have any questions let me know and I will do my best to help you!
◀ CSS Tutorial to Center an HTML Element or TextHow to Perfectly Center Text with CSS ▶
Posts
