SHARE
TWEET

Center Your Entire Web Site

Phr0zen_Penguin Aug 29th, 2014 212 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <!--------------------------------------------------------------------------------------------------
  4.  --------------------------------------------------------------------------------------------------
  5.  [site_center.html]
  6.         A foolproof up-to-date way of centering your entire web site using nothing but a 'div' and CSS.
  7.  
  8.                 (c) Damion 'Phr0z3n.dev' Tapper, 2014.
  9.                 Email: Phr0z3n.Dev@Gmail.com
  10.  --------------------------------------------------------------------------------------------------
  11.  --------------------------------------------------------------------------------------------------->
  12.  
  13. <html>
  14.         <head>
  15.  
  16.                 <title>
  17.                         Phr0z3n.Dev's Centered Web Site
  18.                 </title>
  19.  
  20.                 <style type="text/CSS">
  21.                         body{
  22.                                 font-family: helvetica;
  23.                                 font-size: 11pt;
  24.                         }
  25.                         h1{
  26.                                 margin: 0px;
  27.  
  28.                                 font-family: verdana;
  29.                                 font-size: 16pt;
  30.                                 text-align: center;
  31.                         }
  32.  
  33.                         /***************************************************************************************
  34.                          * Here we just dig into the matter without hesitation.  Pretty much every attribute set
  35.                          * here is relevant to the process except for 'border' and 'border-radius'.  The former
  36.                          * gives us an idea of the site's outline, and evidence that it is truly centered, when
  37.                          * we are done.  The latter almost always make sense.
  38.                          ****************************************************************************************/
  39.                         #mainDiv{
  40.  
  41.                                 /**
  42.                                  * Set the overall web site dimensions.  This will vary depending on your site's
  43.                                  * intended usage.
  44.                                  **/
  45.                                 width: 800px;
  46.                                 height: 600px;
  47.  
  48.                                 /**
  49.                                  * Without absolute positioning, the site could not be centered vertically using this
  50.                                  * method.
  51.                                  **/
  52.                                 position: absolute;
  53.  
  54.                                 border: 2px solid rgb(0, 128, 0);
  55.                                 border-radius: 20px;
  56.  
  57.                                 /**
  58.                                  * Horizontal Centering:
  59.                                  * Notice how the margin attributes are set to a fraction of the overall relative
  60.                                  * dimensions.
  61.                                  **/
  62.                                 left: 50%;
  63.                                 margin-left: -400px;
  64.  
  65.                                 /**
  66.                                  * Vertical Centering:
  67.                                  **/
  68.                                 top: 50%;
  69.                                 margin-top: -300px;
  70.  
  71.                                 /**
  72.                                  * NOTE: even without deprecated alignment elements/attributes, it is quite evident
  73.                                  * that this is more than just an interesting method to get the job done.
  74.                                  **/
  75.                         }
  76.  
  77.                 </style>
  78.  
  79.         </head>
  80.         <body>
  81.  
  82.                 <div id="mainDiv">
  83.                 <p>
  84.                 Voila, your site is officially centered.&nbsp; (<em>But not your text</em>)&nbsp; Now get on with the coding.&nbsp; ;)
  85.                 </p>
  86.                 </div>
  87.  
  88.         </body>
  89. </html>
RAW Paste Data
Top