我目前正在开发一个简单的网站，但我需要在屏幕中间放置一个 div，以适应不同的浏览器尺寸。
我快要开始工作了，但还没有人能告诉我哪里出错了。
要查看的实时站点是 http://adamnicolaou.com/
感谢帮助
这是我的 CSS:
/* DEFAULTS
-------------------------------------------------------------------------------*/
* { font-family:FuturaFont; color:#F1F2F2; background-color:#333133; }
/* FONT - TEXT
-------------------------------------------------------------------------------*/
@font-face { font-family:FuturaFont; src: url('../font/FuturaLT_Light.ttf'), url('../font/FuturaLT_Light.eot'); /* IE9 */ }
* { font-family:FuturaFont, helvetica; color:#F1F2F2; background-color:#333133; letter-spacing:2px;}
h5 { font-size:25px; text-transform:uppercase; text-align:center; margin-top:5px; }
h1 { font-size:20px; text-transform:uppercase; }
p { font-size: 18px; letter-spacing:3px; text-transform:uppercase; }
h4 { font-size:18px; text-transform:uppercase; line-height:25px;}
footer small { font-size: 12px; text-transform:none; text-align: center; }
/* LAYOUT
-------------------------------------------------------------------------------*/
html, body, #container { height:97.5%; margin: 0; padding: 0; padding-bottom:-8%;}
body { min-width:1164px; min-height:720px;}
#container { height: auto; min-height: 98%; margin:auto 0; margin-left:auto; margin-right:auto; position:relative; }
#content { padding-bottom: 10px; margin-left:135px; margin-top:60px; width:900px; position:relative; margin-left:auto; margin-right:auto; }
footer { font-size:15px; text-align:center; height:20px; position:relative; }
#enter { vertical-align:middle; position:relative; margin-top:5%; padding:0; }
header { padding-left:10px; padding-right:10px; background-color:transparent; }
aside { margin-left:520px; position:relative; margin-top:-530px;}
/* LINKS - NAVIGATION - HEADER
-------------------------------------------------------------------------------*/
a { text-decoration:none; border:0px; padding:0; }
a:hover { text-decoration:underline; }
#nav ul { list-style:none; text-align:right; text-transform:uppercase; padding-right:10px; line-height:32px; position:relative; margin-top:-130px; font-size:20px; }
#logo { padding:10px; position:relative; z-index:10;}
.navtext { margin-top:-62px; margin-left:160px; z-index:10; position:relative; background-color:transparent; width:800px; }
body#home ul li .home, body#design ul li .design, body#photography ul li .photography, body#contact ul li .contact { text-decoration:underline; }
#content a .imglink:hover { border:3px; border-style:solid; color:#626162; }
/* PORTFOLIO IMAGES
-------------------------------------------------------------------------------*/
#content .img { padding:10px; position:relative; }
这是我的首页 HTML 代码:
<body id="index">
<div id="container">
<header>
<div id="nav">
</div> <!--- END OF NAV DIV --->
</header>
<div id="enter">
<center><img src="images/enter_logo.png"><br></center><br><br>
<a href="welcome"><h5>Enter</h5></a>
</div>
</div> <!--- END OF CONTAINER DIV --->
</body>
最佳答案
如果您正在寻找垂直居中，请在您的 CSS 规则中尝试这样做:
#outer {
position:static;
}
#middle {
position:absolute;
top:50%;
}
#inner {
position:absolute;
top:-50%;
}
你可以在这个fiddle中查看
只需调整窗口大小并查看它的外观
关于CSS Center Div - 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10271603/