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 ]


<!DOCTYPE html>



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

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



<div class="all">

<div class="wrapper">

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





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. Target Firefox only


CSS targeting Firefox web browser only: This text is red in Firefox HTML / XHTML. Code: <p>This text is red in Firefox</p> CSS. Code: @-moz-document url-prefix() {p {color: #f00;}} Unlike the method of styling elements for Opera browser only, it is essentially a hack - since the rule originally is intended for a different purpose. But lack of support in browsers other than Firefox allows to isolate code for use by Firefox web browser only. [ 1 ] Other browsers with Gecko web browser engine, like SeaMonkey 1.0+ or older Netscape 9.0, also support the hack. [ 2 ] Various versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they are meant to - these browsers ignore the whole code of the Firefox specific hack. [ 3 ] There is also one more browser where text gets red - ELinks, an advanced text-based web browser with some support for CSS.

HTTPS to HTTP redirect for a single page


Redirecting a single page with HTTPS to the page with HTTP. Server configuration: Apache + nginx. SSL is enabled for the whole web site, so all pages are served with HTTPS. But there is a need to make just one single page to be with HTTP. Directives for .htaccess file: RewriteEngine On RewriteCond %{HTTP:HTTPS} on [NV] RewriteRule ^(page\.html)$ http://%{HTTP_HOST}/$1 [R=301,L,QSA] HTTPS to HTTP redirect for a single page in detail -- Enable runtime rewriting engine RewriteEngine On -- If HTTPS is present RewriteCond %{HTTP:HTTPS} on [NV] -- Then, when a page name and extension correspond to the search group in parentheses, form for it a URI with HTTP RewriteRule ^(page\.html)$ http://%{HTTP_HOST}/$1 [R=301,L,QSA] Notes RewriteCond %{HTTP:HTTPS} on [NV] is not the only way to detect if HTTPS is present. Moreover, for some server configurations other directives may be more suitable, like RewriteCond %{SERVER_PORT} 443 for example. The point is to find out somehow if HTTPS is on. So it should probably be checked by practice what is going to work in a particular case. QSA is used to keep the existing query string, if there is any, when the replacement URI also contains a query string. So that in the end both query strings are to be combined. More on the subject: http://httpd.apache.org/docs/2.2/rewrite/flags.html#flag_qsa