c o m p m i s c e l l a n e a . c o m

CSS centering

Windows : Internet Explorer 5.01+, Firefox 1.0+, Google Chrome, Opera 7.03+, Safari 3.1+, SeaMonkey 1.0+ [ 1 ].

Linux : Firefox 1.0+, Chromium, Opera 7.03+, SeaMonkey 1.0+ [ 2 ].

Centering content of a web page by means of CSS. A block containing the content of a page is CSS centered horizontally and vertically - [ Open demo page ]

CSS horizontal and vertical centering, step by step

1. A web page, a part of which is going to be the element the CSS horizontal and vertical centering is to be applied to:

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CSS centering. Step 1</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="1.css" />

</head>

<body>

 

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center;}

2. A block element A (grey color) with dimensions declared explicitly, for instance 800 by 500 pixels and with relative positioning is created in the document's body. The element is centered horizontally and vertically by assigning to its "margin-left" and "margin-right" the value of "auto". [ Open demo page ].

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CSS centering. Step 2</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="2.css" />

</head>

<body>

<div class="element_A">&nbsp;</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; text-align: left; margin-left: auto; margin-right: auto; background-color: #999999;}

3. Another block element B (green) with relative positioning, height equal to that of element A and 100% width is created around the element A. [ Open demo page ].

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CSS centering. Step 3</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="3.css" />

</head>

<body>

<div class="element_B">

<div class="element_A">&nbsp;</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center;}

.element_B {position: relative; left: 0px; top: 0px; height: 500px; width: 100%; background-color: #a3ddc4;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; text-align: left; margin-left: auto; margin-right: auto; background-color: #999999;}

4. A third block element C (rose) with relative positioning is created in <body></body> above the elements A and B. It maybe of any width; with height equal to 50%. The bottom margin is made equal to minus half height of element A, in this case it is -250px [ Open demo page ].

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CSS centering. Step 4</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="4.css" />

</head>

<body>

<div class="element_C">&nbsp;</div>

<div class="element_B">

<div class="element_A">&nbsp;</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center;}

.element_C {position: relative; left: 0px; top: 0px; height: 50%; width: 100px; float: left; background-color: #fdd7d7; margin-bottom: -250px;}

.element_B {position: relative; left: 0px; top: 0px; height: 500px; width: 100%; clear: both; background-color: #a3ddc4;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; text-align: left; margin-left: auto; margin-right: auto; background-color: #999999;}

As a result of these four steps, the element A is centered horizontally and vertically by means of CSS. Next, the color of the third element C is altered to be the same as background color of <body></body> - in order to have the element C be visually hidden. This HTML / XHTML document can be used as a web page template. Everything inside element A will be centered horizontally and vertically.

If the height of element A is larger, than the web browser viewable area height, where the web page is displayed at the moment, then element A is going to fill all the web browser viewable area height, but the horizontal centering of it will still remain there. And if the same web page will appear by this time in a web browser of viewable area height larger, than the height of element A, then vertical centering will come to function again.

The CSS horizontal and vertical centering, sample page, aggregate result [ 3 ] [ Open demo page ] [ Download archive file ].

HTML / XHTML. Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title>CSS centering. Aggregate result</title>

<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />

<link rel="stylesheet" type="text/css" href="css.css" />

</head>

<body>

<div class="element_C">&nbsp;</div>

<div class="element_B">

<div class="element_A">

<div class="box">

<div class="site"><span class="sitecontent"><a href="http://www.compmiscellanea.com/" class="sitelink">compmiscellanea.com</a></span></div>

<h1><span class="title"><span class="titlecontent"><a href="http://www.compmiscellanea.com/en/css-centering.htm" class="titlelink">CSS centering</a></span></span></h1>

</div>

</div>

</div>

</body>

</html>

CSS. Code:

html {height: 100%; margin: 0px;}

body {background-color: #ffffff; margin: 0px; height: 100%; text-align: center;}

.element_C {position: relative; left: 0px; top: 0px; height: 50%; width: 100px; float: left; background-color: #ffffff; margin-bottom: -250px;}

.element_B {position: relative; left: 0px; top: 0px; height: 500px; width: 100%; clear: both;}

.element_A {position: relative; top: 0px; left: 0px; width: 800px; height: 500px; text-align: left; margin-left: auto; margin-right: auto; background-color: #999999;}

/*---------------- element A content ----------------*/

h1 {font-weight: normal; margin: 0px; float: left; font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #ffffff;}

.box {position: relative; top: 0px; left: 45px; width: 708px; height: 408px; float: left; border: 1px solid #ffffff; margin-top: 45px;}

.site {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; margin-top: 152px; text-align: center;}

.sitecontent {position: relative; top: 0px; left: 0px; height: auto; width: auto; margin: auto; display: table; display: inline-block; text-align: left;}

.title {position: relative; top: 0px; left: 0px; width: 708px; height: auto; float: left; text-align: center;}

.titlecontent {position: relative; top: 0px; left: 0px; width: auto; height: auto; margin: auto; display: table; display: inline-block; text-align: left; word-spacing: 2px;}

a.sitelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #cc0000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.sitelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 48px; color: #000000; font-weight: normal; text-decoration: none; text-transform: uppercase; float: left;}

a.titlelink:link {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:visited {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:hover {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #cc0000; font-weight: normal; text-decoration: none; float: left;}

a.titlelink:active {font-family: "Times New Roman", "Liberation Serif", serif; font-size: 28px; color: #ffffff; font-weight: normal; text-decoration: none; float: left;}

/*---------------- element A content ----------------*/

CSS horizontal and vertical centering [ 4 ].

The most simple and reliable way of horizontal and vertical centering. It works in all major web browsers for desktop computer, notebook and netbook systems; in a part of mobile devices web browsers. Actually there is one more way of horizontal and vertical centering of comparable range - HTML centering, by means of <table></table> tag, but it is rather obsolescent. Which does not prevent it to work in most various web browsers, not only major and not only modern ones.

General idea

An element A is created - it maybe be used later as a container for other elements to be situated in it and positioned by some way with respect to each other and the container edges. The element A has its width and height declared explicitly, for instance, but not only, in pixels. Its position is centered horizontally by means of "margin-left" and "margin-right" CSS properties with "auto" value.

A second element B of the same height and of the width equal to 100% is created around element A - i.e. it is going to take up all the width of the web browser viewable area.

Then the third element C of height equal to 50% is created above element A and element B in the HTML document body. Thus this element pushes the top edge of the area formed by element B (equal to 100% of the web browser viewable area, equal to the height of element A) down by 50%. The top edge of element A results to be centered vertically in the web browser viewable area of any current height.

By assigning the value of minus half height of element A to "margin-bottom" CSS property of element C, the element A moves up to the position when its middle is centered vertically in the web browser viewable area of any current height. Thus element A results to be centered horizontally and vertically.

To have the third element C hidden out of sight, its color is assigned to be the same as the one of the page background.

You may also be interested in:

JavaScript + CSS centering

HTML centering

CSS vertical alignment

[ 1 ]

As well as Mozilla 1.0+ and Netscape 7.01+.

[ 2 ]

As well as hv3, Mozilla 1.0+ and Netscape 7.01+.

[ 3 ]

The content of the centered container used in this aggregate result is created by technologies working in Internet Explorer 5.5+ and Opera 7.5+. The centering of this container, of element A, is by means of the same method described above and it works as mentioned in the beginning of the post - Internet Explorer 5.01+ and Opera 7.03+.

[ 4 ]

It is not the only way of CSS horizontal and vertical centering. There are some others. But this CSS horizontal and vertical centering method proved to be the most reliable (works in the largest number of web browsers of the most various versions) and the easiest to implement.

Navigate

Up | Main page