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

Question

I need to split the background of an html page in 2 (horizontally). 我需要将html页面的背景一分为二（水平）。 The top and bottom part will have a different background image/texture, that will be repeated, in other words expandable with the window's size. 顶部和底部将具有不同的背景图像/纹理，将重复该背景图像/纹理，换句话说，可以随窗口的大小扩展。 On top of this "split background", I want to display some content, like texts or images. 在此“拆分背景”之上，我想显示一些内容，例如文本或图像。

This code generates a "split background" like I want, but I can't/don't know how to put content on top of that... 这段代码会生成我想要的“分割背景”，但是我不知道如何将内容放在上面。

<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>

The content should be centered vertically and horiontally on top of this "split background". 内容应在此“拆分背景”的顶部垂直并水平居中。 I tried to use a third div, play with z-indexes and use the css3 multiple bg feature, but I couldn't get the result wanted. 我尝试使用第三个div，使用z-indexes并使用css3多bg功能，但是我无法获得想要的结果。 Any suggestions? 有什么建议么？

Answer 1

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

To vertically center content with unknown height, you can use this technique: 若要垂直居中放置高度未知的内容，可以使用以下技术：
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 2

Ok at the end I couldn't find a solution in CSS. 好的，最后我找不到CSS解决方案。 The content image I was placing over the 2 other divs would not align correctly if the browser window was too small... 如果浏览器窗口太小，我放在其他2个div上的内容图像将无法正确对齐...

I solved it using some javascript, since the site I develop already contains Javascript, it wasn't an issue. 我使用一些JavaScript解决了该问题，因为我开发的网站已经包含Javascript，所以这不是问题。

Here is the html: 这是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>

And the css: 和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

Just create a third div. 只需创建第三个div。 as it comes afterwards it should be displayed on top without needing z-indexes. 之后，它应该显示在顶部，而不需要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>

adding the position absolute and setting it to top,left = (0,0) you can afterwards work with it without a problem. 添加绝对位置并将其设置为top，left =（0,0），之后可以毫无问题地使用它。 Ignoring the other divs that give color to the background. 忽略其他为背景赋予颜色的div。

Edit: 编辑：

Fixed to answer to your comment. 固定回答您的评论。 Like that it will create a box 900px by 900px always centered in the middle of the screen. 这样，它将创建一个始终位于屏幕中间居中的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