CSS图像/内容超过2 <div> 并垂直居中

Question

我需要将html页面的背景一分为二（水平）。 顶部和底部将具有不同的背景图像/纹理，将重复该背景图像/纹理，换句话说，可以随窗口的大小扩展。 在此“拆分背景”之上，我想显示一些内容，例如文本或图像。

这段代码会生成我想要的“分割背景”，但是我不知道如何将内容放在上面。

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; }
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
</body>

</html>

内容应在此“拆分背景”的顶部垂直并水平居中。 我尝试使用第三个div，使用z-indexes并使用css3多bg功能，但是我无法获得想要的结果。 有什么建议么？

Answer 1

使用position:fixed示例：
http://jsfiddle.net/LBQbb/3/

若要垂直居中放置高度未知的内容，可以使用以下技术：
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 2

好的，最后我找不到CSS解决方案。 如果浏览器窗口太小，我放在其他2个div上的内容图像将无法正确对齐...

我使用一些JavaScript解决了该问题，因为我开发的网站已经包含Javascript，所以这不是问题。

这是html：

<html>
<head>
<link href="css/reset-min.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            $(window).resize(function(){

                $('.content').css({
                    position:'absolute',
                    left: ($(window).width() 
                      - $('.content').outerWidth())/2,
                    top: ($('body').height() 
                      - $('.content').outerHeight())/2
                });

            });

       //To initially run the function:
       $(window).resize();

    });
    </script>

</head>

<body onload="$(window).resize()"> <!-- needed to correct loading bug -->

    <div class="top"></div>
    <div class="bottom"></div>

    <div class="content">
         <img alt="Content" src="img/01_illustration.png" /> 
    </div>
</body>
</html>

和CSS：

html, body { width:100%; height: 100%; }

body { min-height: 768px; min-width: 1024px; }


.top { width: 100%; height: 50%; background-image:url('img/01_texture_top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/01_texture_bottom.jpg'); }

.content {}

Answer 3

只需创建第三个div。 之后，它应该显示在顶部，而不需要z-indexs。

<html>
<head>
<style type="text/css">
html{height: 100%;}
body { width: 100%; height: 100%; min-width:950px; min-height: 950px;}
.top { width: 100%; height: 50%; background-image:url('img/top.jpg'); }
.bottom { width: 100%; height: 50%; background-image:url('img/bottom.jpg'); }
.third { position: absolute; top:50%; left:50%; width: 900px; margin-left: -450px; margin-top: -450px; }
</style>
</head>

<body>
<div class="top"></div>
<div class="bottom"></div>
<div class="third"> add content here</div>
</body>

添加绝对位置并将其设置为top，left =（0,0），之后可以毫无问题地使用它。 忽略其他为背景赋予颜色的div。

编辑：

固定回答您的评论。 这样，它将创建一个始终位于屏幕中间居中的900px x 900px的框。

CSS图像/内容超过2 <div> 并垂直居中

问题描述

3 个解决方案

解决方案1
0 2011-10-16 21:13:58

解决方案2
0 已采纳 2011-10-17 09:47:20

解决方案3
-1 2011-10-16 21:08:57

CSS图像/内容超过2 <div> 并垂直居中

问题描述

3 个解决方案

解决方案1 0 2011-10-16 21:13:58

解决方案2 0 已采纳 2011-10-17 09:47:20

解决方案3 -1 2011-10-16 21:08:57

解决方案1
0 2011-10-16 21:13:58

解决方案2
0 已采纳 2011-10-17 09:47:20

解决方案3
-1 2011-10-16 21:08:57