0

所以也许这只是我将身体居中的方式，因为我将它显示为 html 中的居中表格。

html {
    display: table;
    margin: auto;
}

body {
    width:100%;
    display: table-cell;
    vertical-align: middle;
}

#background{
    width:100%;
    height:100%;
    position:fixed;
    background-image:url('image.jpg'); 
    background-repeat: no-repeat;
    background-size:cover;
}

基于该代码，我可以看到图像将从主体的开头开始，从中心开始，因此图像将从那里开始，并且我有不应该存在的空白空间；我希望正文中的内容居中，但背景不应该如此，这样它才能以正确的方式适合屏幕。我尝试将我的中心代码转移到容器中，但没有奏效。我环顾了一两个小时，所有的答案都没有为我工作。知道如何解决这个问题吗？

4

2 回答 2

1

您是否重置了页面的边距？

html {
  margin: 0;
  padding: 0;
 }

body {
  margin: 0;
  padding: 0;
 }

此外，如果您想要的结果是全屏背景，为什么不这样：

body {
  background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
background-size: cover;
}

检查此链接以获取替代方法： http ://css-tricks.com/perfect-full-page-background-image/

于 2013-03-08T18:52:46.600 回答
0

不让你的身体居中怎么样，你能把它包在一个容器里吗？“mainContainer”并将其居中？

编辑：这是一个从你的http://jsfiddle.net/amyamy86/C4Spd/分叉的小提琴

<html>
    <body>
       <div id="background"></div>
       <div id="outerContainer">
           <div id="mainContainer">
               <div id="box">
                   <p>This is some content</p>
               </div>
           </div>
       </div>
    </body>
</html>

#outerContainer {
    display: table;
    margin: auto;
}
#mainContainer{
    width:100%;
    display: table-cell;
    vertical-align: middle;
}
#background {
    width:100%;
    height:100%;
    background-image:url('http://mytwopiasters.files.wordpress.com/2011/01/ocean.jpg');
    position:absolute;
    background-repeat: no-repeat;
    background-size:cover;
}
#box {
    text-align:center;
    width:100px;
    position:fixed;
    height:100px;
    background:#fff;
    border:1px #000 solid;
}
于 2013-03-08T18:24:12.043 回答