简单的问题。我希望我的页面位于中间，从上到下。它已经从左到右居中。
请指出我需要添加的内容以及在哪里，谢谢。如果您在css中看到一些错误，请更正。
@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>
谢谢。
答案 0 :(得分：2)
喜欢这个
$(function() {
$(window).on('resize', function() {
$('.wrapper').css('margin-top', function() {
return ($(document).height() - $(this).height()) / 2;
});
}).trigger('resize');
});
答案 1 :(得分：0)
CSS 可以帮助您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
如果您不想使用table display，可以尝试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