Vertical Centering

November 18, 2009 at 12:00 am 3 comments

It’s possible, although a little tricky, to center text or an image along the vertical axis of the page or within a box. Centering text and images horizontally is easily done with the text-align:center setting, which is used in the examples below for that exact purpose. The discussion focuses on achieving the vertical centering.

On the Page

Centering something on the page uses absolute positioning so you can set values for the parent in relation to the top and left sides of the viewport.

Vertically Centered Text

In this example text is vertically centered on the page inside an absolutely positioned box.

CSS

The text is moved to the middle of the page vertically by setting top:50%, and is moved to the center of the page by setting width:100% and text-align:center. I included the box border so it is easier to see what is happening on the page.

body{font-size:14px;}
*.box{position:absolute; width:100%; border: 1px solid #8b0000;
  top:50%; left:0; text-align:center;}

HTML

The box and positioning settings are applied to the parent div of the text to get the vertical centering.

<div class="box">Vertically Centered Text</div>

What it Looks Like

Vertically Centered Image

An image is done the same way as the text, except that instead of text, you provide an image.

CSS

body{font-size:14px;}
*.box{position:absolute; width:100%;
  border: 1px solid #8b0000;
  top:50%; left:0; right:0; text-align:center;}

HTML

<div class="box">
<img src="kangarooflowerthumbsmall.gif" height="38px"
 width="50px" />
</div>

What it Looks Like

Within a Box

Centering something within a box on the page involves a fixed height and width and some calculations to work out the top margin setting to push the text or image down far enough so it is centered vertically.

Vertically Centered Text

To vertically center text within a box requires font-size, box height, box width, and margin-top settings preferably in the same units so you can make calculations to figure out how far down you need to push the text from the top of the box. I used pixels for the example.

The box has a border so you can see how the text centers within it. You can use this method to create buttons, boxes, divisions, and so on.

CSS

The text is nested within a fixed height and width box. The textbox is set to 100% height and width of it’s parent. The margin-top value is calculated for the textbox by halving the fixed height of the parent (200px/2px = 100px) and subtracting half the height of the font-size (100px – 7px = 93 px), and subtracting the border width (93px – 1 px = 92px).

Note: Both box2 and textbox must use absolute positioning to work in Internet Explorer.

body{font-size:14px;}
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.textbox{position:absolute; text-align:center;  margin-top:92px;
  height:100%; width:100%;}

HTML

The textbox is nested within the fixed height and width parent box. The margin-top setting of the textbox centers it vertically within its parent box.

<div class="box2">
<div class="textbox">Vertically Centered Box Text
</div>
</div>

What it Looks Like

Vertically Centered Image

An image is done the same way as the text, except that instead of text, you provide an image and the margin-top calculation does not take the border into account because the image sits inside the border.

CSS

The margin-top value is half the parent height (200px/2px = 100px) minus half the height of the image (100px – 19px = 81px).

Note: Both box2 and textbox must use absolute positioning to work in Internet Explorer.

body{font-size:14px;}
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.imagebox{position:absolute; text-align:center;  margin-top:81px;
  height:100%; width:100%;}

HTML

<div class="box2">
<div class="imagebox">
<img src="kangarooflowerthumbsmall.gif" height="38px" width="50px" />
</div>
</div>

What it Looks Like

Code

Source Code

<html>
<head><title>Vertical Centering</title>
<style type='text/css'>

body{font-size:14px;}
*.box{position:absolute; width:100%; border: 1px solid #8b0000;
 top:50%; left:0;  text-align:center; }
 
*.box2{position:absolute; height:200px; width:200px; border:1px solid #8b0000;}
*.textbox{position:absolute; text-align:center;  margin-top:92px; height:100%; width:100%;}
*.imagebox{position:absolute; text-align:center; margin-top:81px; height:100%; width:100%;}

</style>
</head>
<body>

<div>
Vertically Centered Text
 <!-- <img src="kangarooflowerthumbsmall.gif" height="38px" width="50px" /> -->
</div>


<div>
<div>
Vertically Centered Box Text
</div>
</div>

<div>
<div>
<img src="kangarooflowerthumbsmall.gif" height="38px" width="50px" />
</div>
</div>


</body>
</html>

Entry filed under: Design Tips, See All. Tags: centering, css, vertical centering.

Centering Indenting Text

3 Comments Add your own

1. Trackback | November 23, 2009 at 2:53 pm

Comentario…

[..]Articulo Indexado Correctamente[..]…
Reply
2. Innovative Website Design Junction | July 12, 2012 at 3:53 am

The code and tips mentioned here regarding adding a text or image on the vertical axis with the help of tag, will benefit a beginner who has recently ventured out to create a website design with the help of tag instead of tag.
Reply
3. company that can take my car to bristol | December 20, 2018 at 4:15 am

WOW just what I was searching for. Came here
by seaching for online
Reply

Web Design & Development Tips