Kompx.com or Compmiscellanea.com

CSS horizontal and vertical centering - 2

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 the content of a web page in the viewable area of a browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically: [ Open demo page ]


<!DOCTYPE html>



<title>CSS horizontal and vertical centering - 2</title>

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



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

<div class="wrapper">

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




CSS. Code:

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

body height: 100%; margin: 0px;}

.spacer {position: relative; top: 0px; left: 0px; height: 50%; width: 100px; float: left; margin: 0px 0px -250px 0px; background: #999;}

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

.pagecontent {position: relative; top: 0px; left: 0px; height: 500px; width: 800px; margin: 0 auto; background: #ff6f6f;}

The .pagecontent box is for the page content. It must be of a fixed height and width in units like px's or em's - not in percents. Height and width may be larger than web browser viewable area, but here the more practical case is discussed - when the height and width of .pagecontent are smaller than those of the web browser viewable area.

The .pagecontent box is horizontally centered by its "margin: 0 auto".

.Wrapper creates a space where .pagecontent is centered horizontally. .Wrapper's width is 100% for centering at various web browser viewable area sizes. The height has to be equal to the one of .pagecontent.

.Spacer centers .wrapper with .pagecontent in it vertically inside browser viewable area. Its width may be any. The height is 50% - that places the top edge of .pagecontent vertically in the middle of the browser viewable area. The bottom margin of .spacer equal to half the .pagecontent height centers .pagecontent and its contents vertically in the web browser viewable area of a current height.

This method is reliable in all major modern web browsers. It also works in older browsers like Internet Explorer 6 or earlier versions of Maxthon. But the height of box for page content has to be assigned explicitly and if it is changed - the size of .spacer bottom margin must be changed accordingly as well. There is another way of CSS horizontal and vertical centering, with CSS code easier to maintain, even if not suitable for older web browsers: CSS horizontal and vertical centering - 1.

[ 1 ]

As well as Netscape 7.2+, Mozilla 1.5+.

[ 2 ]

As well as Netscape 7.2+, Mozilla 1.5+.

Aliosque subditos et thema


CSS centering absolutely positioned elements


CSS horizontal centering of an absolutely positioned element. Example: HTML / XHTML. Code: <div class="example"> <img src="image.jpg" alt="Image" /> </div> CSS. Code: .example {position: relative; left: 0px; top: 0px; height: 90px; width: 100%; float: left; padding: 10px; border: 1px #ccc solid; background: #fafafa; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;} .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto; width: 68px;} An absolutely positioned img is centered in the example. But this method of horizontal centering also works with other both inline and block absolutely positioned elements. The width of an absolutely positioned element may also be in percent or other units. CSS properties of a container (here it is .example), holding an element to be centered, may vary. The element's centering is achieved by styles applied to the element itself: .example img {position: absolute; left: 0px; right: 0px; margin: 0px auto;}. [ 1 ] As well as Netscape 8.01+, Mozilla 1.5+. [ 2 ] As well as Netscape 8.01+, Mozilla 1.5+.

Windows console applications


Some time ago text-based applications were the only form of software of average end user computer experience. As well as after the graphical user interface programs started to become widespread, console applications used to retain their strong positions. But gradually GUI software virtually superseded text-based applications in daily use of the average end user. However, even now there are console programs that can more or less compete with software of graphical user interface, be useful for the average user to solve various problems and fulfill numerous tasks on modern computers. Windows console applications. File managers Windows console applications. Multimedia Windows console applications. Web browsers Windows console applications. Text editors Besides file managers, multimedia programs, text editors, web browsers, there are plenty of other text-based programs and utilities for use under Windows: both standalone and those included in MS Windows distributions. For example, ipconfig and netstat for work with network, Windows built-in FTP client useful for some tasks, CommandBurner for command line burning CD / DVD or cdburn with dvdburn from Windows Server 2003 Support Tools for the same, etc.