Kompx.com or Compmiscellanea.com

CSS horizontal and vertical centering - 1

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

Linux : Firefox 1.0+, Google Chrome / Chromium, Opera 5.0+, 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 ]

HTML / XHTML. Code:

<!DOCTYPE html>

<html>

<head>

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

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

</head>

<body>

<div class="all">

<div class="wrapper">

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

</div>

</div>

</body>

</html>

CSS. Code:

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

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

.all {position: relative; left: 0px; top: 0px; height: 100%; width: 100%; float: left; display: table;}

.wrapper {position: relative; left: 0px; top: 0px; height: auto; width: 100%; display: table-cell; vertical-align: middle;}

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

The .pagecontent box is for the page content. It may be of height assigned explicitly or just "height: auto". Unlike CSS horizontal and vertical centering - 2, here percents may also be used as CSS units; not just px's or em's. 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".

.All with its CSS properties makes the whole web browser viewable area into a CSS table.

CSS properties makes .wrapper into the cell of this CSS table. The content of this CSS table cell - the .pagecontent box with everything inside it - is vertically centered in the viewable area of a browser by "vertical-align: middle".


[ 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


1 ) CSS horizontal and vertical centering - 1 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More for modern web browsers : [ More ] : [ Open demo page ] 2 ) CSS horizontal and vertical centering - 2 Centering a container with the whole content of a web page inside in the viewable area of a web browser by means of CSS. A box to contain the whole content of the page is CSS centered horizontally and vertically. More conservative, than the previous method. Suitable not only for modern web browsers, but for older ones as well - like Internet Explorer 6 or earlier Maxthon. A shortcoming - it takes more efforts to maintain the CSS code compared to [ CSS horizontal and vertical centering - 1 ] method : [ More ] : [ Open demo page ] 3 ) CSS centering floated elements Floated elements of unknown width are CSS centered horizontally : [ More ] : [ Open demo page ] 4 ) CSS centering absolutely positioned elements CSS horizontal centering of an absolutely positioned element : [ More ] 5 ) CSS centering image CSS horizontal centering of an image : [ More ] 6 ) CSS vertical alignment CSS vertical alignment of a block element containing text and images. The method works for various combinations of inline and block elements : [ More ] 7 ) JavaScript + CSS centering Centering content of a web page by means of JavaScript and CSS. A block containing the content of a page is JavaScript + CSS centered horizontally and vertically : [ More ] : Two cases : 1. A block is centered, if screen resolution is equal to or greater than 1024x768 : [ Open demo page ] 2. A block is centered, if screen resolution is equal to or greater than 1024x768 + mouse cursor is moved over a link in an element of the page content : [ Open demo page ]

HTTP to HTTPS redirect in .htaccess


Redirecting from all domain names of a web site to its web address with HTTPS and the domain with www. The names to be redirected from are: Both with and without www - URL with HTTP Without www - URL with HTTPS Server configuration: Apache + nginx. SSL in enabled. SSL-certificate is purchased, approved and installed. That is, everything is up and running. So it is just the HTTP to HTTPS redirection that is left to get ready and start up. Directives for .htaccess file: RewriteEngine On RewriteCond %{HTTP:HTTPS} !on [NV] RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L] RewriteCond %{HTTP_HOST} !^www\. RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L] HTTP to HTTPS redirect in detail -- Enable runtime rewriting engine: RewriteEngine On -- If HTTPS is not present: RewriteCond %{HTTP:HTTPS} !on [NV] -- Then replace HTTP + domain (with or without www) with HTTPS + domain with www: RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L] -- If HTTPS is present, but domain name has no www (the case when https://domain.tld is entered in address bar): RewriteCond %{HTTP_HOST} !^www\. -- Then replace it with HTTPS + domain with www: RewriteRule ^(.*)$ https://www.domain.tld/$1 [R=301,L] Apache Module mod_rewrite docs: http://httpd.apache.org/docs/current/mod/mod_rewrite.html