Question

我确定我忽视了一些简单的事情，但我试图将内容div放在页面上。背景图片是16x9，我希望它保持放置，而中心内容div在标题div下面上下滑动。

这是我的HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css">

</head>

<body>
<div id="bod">
<div id="head">
toolbar
</div>
<div id="content">
Hello

</div>
</div>
</body>
</html>

这是我的css

@charset "UTF-8";
/* CSS Document */
body{
    background-image:url(images/1920w.png);
    background-size:100%;
    position:fixed;
    background-repeat:no-repeat;
    background-color:#E9C9A0;
    }

#bod{
    width:100%;
}

#head{
    position:fixed;
    margin-right:auto;
    margin-left:auto;
    width:62.5%;
}

#content{
    width:62.5%;
    height:100%;
margin-right:auto;
margin-left:auto;

}

Answer 1

fixed，absolute，float不能居中或对齐页面或相邻元素，它们不在文档的自然流中，也不关心显示。

但他们可以保留内容，可以在里面流动。

#bod{
    width:100%;
    position:fixed;
    left:0;
}

#head{
    margin-right:auto;
    margin-left:auto;
    width:62.5%;
}

你真的非常接近，＃bod必须修复，所以#head可以在其中流动：）

Answer 2

身体不需要position: fixed。

删除此规则后，div会按预期进行居中，如this jsFiddle。

所示

Answer 3

这是你想要的吗？

DEMO

如果是这样，我会向你解释我所做的事情：

我使用了Flexible Box Model或Flexbox，但要小心！这是一个正在修改的盒子模型。

我冒昧地发布答案，因为有两件事：

虽然我使用了已弃用的属性，但我认为浏览器（至少我的浏览器;我使用Chrome 27.0.1453.116版本）不适用于新版本属性。
我认为很好地学习这个规范，因为像草案中的W3C一样Candidate Recommendation。

好吧，现在我会解释你我做了什么：

首先，我更改了以下css代码：

@charset"UTF-8";

/* CSS Document */

body, div {
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

body {
    background-image:url(images/1920w.png);
    background-size:100%;
    background-repeat:no-repeat;
    background-color:#E9C9A0;
}
#bod {
    width:100%;
    height: 100%;
}
#head {
    background: navy;
    width:62.5%;
}
#content {
    background: #333;
    width:62.5%;
    height:100%;
}

我改变了一些你的CSS代码，因为你使用了例如position：fixed;但你想把元素集中。如果您放置该属性，则无法将元素居中，因为它已修复。此外，有些元素的高度和宽度都达到了100％，但它的父母没有大小。

然后，我将以下类添加到您的HTML代码中：

p-flexbox 和 flex-vcc

其中：

p-flexbox 表示 parent-flexbox
flex-vcc 表示 flexbox-vertical-center-center

这是您的HTML代码：

<div id="bod" class="p-flexbox flex-vcc">
    <div id="head">toolbar</div>
    <div id="content">Hello</div>
</div>

最后，我提出了这些CSS规则：

.p-flexbox {
    /* Flexbox: Init setup */
    display: -webkit-box;
    display: -moz-box;
    display: box;
}
.flex-vcc {
    /* Flexbox: Principal setup */
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
}

干杯，莱昂纳多

DIV居中，在固定背景之上

3 个答案: