Question

我目前正在开发一个简单的网站，但我需要在屏幕中间设置一个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>

Answer 1

如果您正在寻找垂直居中，请在CSS规则中尝试：

#outer {
    position:static;
}
#middle {
    position:absolute;
    top:50%;
}
#inner {
    position:absolute;
    top:-50%;
}

您可以在此fiddle

中查看

只需调整窗口大小并查看其外观

CSS中心区 - 问题

1 个答案: