Center website in the middle of the page from top to bottom

Question

Simple question. I want my page to be in the middle, from top to bottom. It's already centered from left to right.

Just point out what I need to add and where, thank you. If you see some error in the css, please correct that too.

    @charset "utf-8";
/* CSS Document */
/* Created By CaptainMcMarcus */
/* Heavily customized by Sjokomelk */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,600);

html {
    height: 100%; -webkit-font-smoothing: antialiased; font-smoothing: antialiased;
}

/* Clearing some default browser settings */
* {border: 0px; margin: 0px; padding: 0px;}
a:active {outline:none;}
:focus {-moz-outline-style:none;}
.clear {clear:both;}

/* These parts can be easily changed to affect the design */
body {color: #FFF; font-family: "Open Sans", Arial, Helvetica, sans-serif;
    background: url('images/bg.jpg') no-repeat; background-size: 100% auto; background-size: cover; background-attachment: fixed;}

p {text-align: justify; font-size:16px;}
p a { text-decoration: underline; color: #ea5353; text-decoration: underline;}
p a:hover { text-decoration: none; color: #333;}

/* Core Wrapper which we vertically align */
.wrapper {width: 700px; height: auto; margin: 0 auto;}

.box-wrap {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}

.box-wrap h2 {width: 100%; height: auto; padding: 15px 0; text-align: center; 
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}

.box-wrap p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 18px; padding: 15px 30px; overflow: hidden; 
text-align: justify; width: 640px; height: auto; background: #ffffff; color: #717171;}

.icon-box {width: 210px; height: 210px; background: #FFF; margin: 20px 15px 20px 0; float: left; text-decoration: none;}
.icon-box a {text-decoration: none;}
.icon-box p {font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 22px; text-align: center; color: #717171; text-decoration: none;}

.icon-box:hover {background: #f1f1f1;}

.wide {width: 700px; margin: 0px;}
.end2 {margin: 0px 0px 0px 0px;}

.end {margin: 20px 0px 0px 0px;}

nav {margin: 10px auto; width: 700px;}
    nav ul {width: 700px; height: auto; list-style: none; float: left; padding:0;}
    nav ul li a {
    background: #FFFFFF;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 18px;
    text-align: center;
    color: #717171;
    text-decoration: none;
    float: left;
    padding: 8px 0;
    width: 105px;
    margin: 0px 14px 0 0;
    }
nav ul li{ position:relative; float:left;}
nav ul li a:hover {background: #f1f1f1;}

nav ul li:last-child a{
margin-right:0;
}

nav ul li ul.submenu {
    position: absolute;
    width: auto;
    display:none;
    top: 35px;
}
nav ul > li:hover > ul {
    left: 0;
    display: block;
}

code, pre {
  padding: 0 3px 2px;
  font-family: Menlo, Monaco, "Courier New", monospace;
  font-size: 10px;
  color: #333333;
}
code {
  padding: 3px 4px;
  color: #d14;
  background-color: #f7f7f9;
  border: 1px solid #e1e1e8;
}
pre {
  display: block;
  padding: 8.5px;
  margin: 0px;
  font-size: 11px;
  line-height: 18px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

pre code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
}

.footer h3 {width: 100%; height: auto; padding: 15px 0; text-align: center; 
background: url('images/header-bg.png') repeat center top; background-color: RGBA(42,52,59,0.75);}

.footer {
    width: 100%;
    height: auto;
    margin: 20px 0 0 0;
    -webkit-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.2);
}

html:

<!DOCTYPE HTML>
<html>
    <head>

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

    <meta name="description" content="Forside" /> 
    <title>Hjortefjellet</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 

    <script type="text/javascript" src="scripts/jquery.js"></script><!-- Link to jquery so we can center the content -->

    </head>

    <body>

    <div class="wrapper"><!-- Opens the wrapper so we can contain and center everything -->

   <img src="images/logo.png" width="702" height="87" alt="Your Logo" />

      <nav>
            <ul>
        <li><a href="index.html">HJEM</a></li>
        <li><a href="forum">FORUM</a></li>
        <li><a href="doner.html">DONER</a></li>
        <li><a href="servere.html">SERVERE</a>
      <li><a href="faq.html">FAQ</a></li>
          <li><a style="margin-right: 0 !important;" href="kontakt.html">KONTAKT</a></li>
  </ul>
      </nav>

        <div class="clear"></div>

      <div class="box-wrap">
            <h2>Velkommen til Hjortefjellet</h2>

            <p class="text-box"><!-- PAGE TEXT -->
            Hjortefjellet er et nytt norsk gaming coummunity som har brukeroplevelsen i fokus. Vi startet opp 21. februar og har nå en Garry's Mod som kjører Trouble in Terrorist Town. Ta gjerne turen innom for å bli bedre kjent med oss.</p>
            <p class="text-box">Has albucius oporteat eu, eos eu etiam intellegam. Has posse dicant feugiat ut, cu quo case convenire definitionem, possim persius meliore no est. Urbanitas vituperatoribus eos in, pro delenit reformidans eu. Nec detracto sadipscing te.</p>

        </div>

        <div class="footer">
          <h3>© Hjortefjellet.com 2014 | Siden benytter cookies</h3>
        </div>

    </div><!-- This closes the wrapper -->



    </body><!-- Closes off the HTML Document -->
</html>

Thank you.

There are many answers to this questions already on Stack. http://www.corelangs.com/css/box/center-div.html http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally — Sophisticake, Apr 06 '14 at 11:00
And make sure you follow the [**new legislation**](http://translate.google.com/translate?hl=en&sl=no&tl=en&u=http%3A%2F%2Funiversellutforming.difi.no%2Fveiledning%2Fnettsider%2Fkrav-til-nettlosninger%2Fkrav-wcag) for websites in your stupid ass country, — adeneo, Apr 06 '14 at 11:17

adeneo · Accepted Answer · 2014-04-06T11:04:45.807

2

Like this

$(function() {
    $(window).on('resize', function() {
        $('.wrapper').css('margin-top', function() {
             return ($(document).height() - $(this).height()) / 2;
        });
    }).trigger('resize');
});

FIDDLE

edited Apr 06 '14 at 11:04

answered Apr 06 '14 at 10:55

adeneo

312,895
29
395
388

He horizontally centers the wrapper, so it would seem logical to me to also vertically center that wrapper instead of the body. Especially because he wants to add a full screen background to body. `margin-top` on the body will also give a margin to that background. – Bram Vanroy Apr 06 '14 at 10:58
I think the link is broken. It is showing something else – Amit Joki Apr 06 '14 at 11:02
@BramVanroy - The wrapper it is then, I usually center the body, but whatever the OP wants, the code is the same anyway. – adeneo Apr 06 '14 at 11:05
@AmitJoki - Jeez, seems I forgot to hit the save button, edited. – adeneo Apr 06 '14 at 11:05
I'll add a resize wrapper to that as well – adeneo Apr 06 '14 at 11:07
@adeneo seems to work, thank you. How do I the content more up? It looks a little bit weird having it so low down. – user3394828 Apr 08 '14 at 09:19
@adeneo I have a lot of content one page too, the header have a lot of space, but the footer has none. – user3394828 Apr 08 '14 at 09:20
@user3394828 - You could divide by more than 2, or subtract from the margin etc. Noe sånt for eksempel -> http://jsfiddle.net/sLVLt/3/ – adeneo Apr 08 '14 at 09:37

score 0 · Answer 2 · answered Apr 06 '14 at 11:48

CSS can help you with display :

html {display:table}
body {
    display:table-cell;
    vertical-align:middle;/* will center content in middle , what you look for*/
/* vertical-align:top; pushes content to top */
/* vertical-align:bottom; pushes content to bottom */
}

DEMO

If you dislike to use table display , you may want to try the flex display:

html,body {
    height:100%;
    width:100%;
}
body {
    display:flex;
}
.wrapper {
    margin:auto;/* because of flex, auto margin is applied on both axis*/
}

DEMO

Center website in the middle of the page from top to bottom

2 Answers2