流畅地将 <div> 居中 <body>

Question

我想在我的 <body> 中有一个 <div>，它占页面宽度和高度的 95%。我希望此 <div> 在所有边上都居中，这样 <div> 的所有边上都存在 2.5% 的边距。附加代码几乎可以工作，但顶部没有边距，因此 <div> 一直延伸到页面顶部。我正在使用重置。任何人都可以提供一些关于为什么这没有按预期工作的见解吗？

这里对我来说最重要的是我对使用非相对测量没有兴趣。我有 Android 开发背景，我相信我所做的任何事情都应该缩放到（几乎）任何屏幕尺寸。

我还想说一下，我刚刚开始使用 HTML/CSS/JS，目前无意支持不符合 W3C 标准（IE）的浏览器。此外，我想避免任何看起来像黑客攻击或解决方法的事情。

CSS 重置如果您感兴趣：http://79.170.44.85/rasmussenprojects.com/reset.css

硬拷贝我只能post 1 link 看来最好link重新设置:

<!doctype html>
<html>
    <head>
        <title>Home</title>
        <meta charset="utf-8" />
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> 
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <style>
            html, body{
                background-color:rgb(25,25,25);
                height:100%;
                width:100%;
                }
            .content-panel{
                background-color:rgb(50,50,50);
                width:95%;
                height:95%;
                margin:auto;
                }
        </style>
    </head>

    <body>
        <div class="content-panel">
        </div>
    </body>
</html>

Answer 1

div{
  background: lightgray;
  bottom: 0;
  height: 95%;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 95%;
}

<div>
  content
</div>

Answer 2

我的看法是，您只需给 body 一个 padding: 2.5%（并且不要忘记 position:relative）。 div 然后应该用 position:absolute;top:0;right:0;bottom:0;left:0;

填充所有可用的 space

一般来说，我也会使用 box-sizing:border-box

流畅地将 <div> 居中 <body>

Centering a <div> in <body> fluidly

html

css

centering