HTML 和 CSS - 无论浏览器大小如何，都可以使 div 居中答案

【问题标题】：HTML and CSS - Centering a div no matter on browser sizeHTML 和 CSS - 无论浏览器大小如何，都可以使 div 居中
【发布时间】：2012-02-18 02:32:43
【问题描述】：

为什么对我来说感觉应该是最简单的任务总是最令人困惑...它在标题中...但是我玩过 yonks 却无法让它为我工作！

基本上（只是为了更清楚，我希望得到以下内容）（图像是 div 背景）。

所以无论浏览器窗口的大小如何，div 总是集中的！

感谢您提供的任何建议... [=

编辑：基本上我想要实现的是一种欺骗方式，有一个注册表单的弹出窗口。

所以目前整个页面包含以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <title>BlurbeRella - Registeration</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <div id="registerpage">
  <img src="images/registerpage.png" class="registerpage" />
 </div>
</html>

CSS：

img.registerpage{ 
 text-align: center;
 top: 100%;
}

#registerpage{
 text-align: center;
 width: 100%;
}

css 是我将其保持在中心位置的微弱尝试.....

基本上：目前的网站（还没有功能）是blurberella.x10.mx

当用户单击注册时，我将获得网站本身的背景图片，因此看起来您仍在同一页面上。然后在中间我将获得我的表单...但要确保网站图片看起来仍然像一个网站，无论浏览器大小如何，我都需要它保持中心位置！

我希望这是有道理的......我不认为我在作弊，但以我目前的知识，这是我能做到的最好的......我还在学习！

【问题讨论】：

你能发布一些代码吗？您可能需要使用宽度与图像相同的 div 并设置margin:0 auto。这是背景图片吗？
你能详细说明一下吗？你想达到图像中的效果吗？无论浏览器窗口有多窄，您是否希望文本保持居中并在一行上？
白点是背景图，对吧？但是红色文本也是背景图像的一部分，还是 div 中实际内容的占位符？
如果图片尺寸大于浏览器，你还想让图片居中吗？如果是这样，您将需要使用 javascript。
我已经编辑了我的问题以尝试更理解它

标签： css html centering

【解决方案1】：

也许我在某处误解了这个问题，但据我了解，您正在寻找类似 @987654321@ 的东西。

HTML：

<body>
<div id="imgholder"></div>
</body>

CSS：

html, body {
    height: 100%;
}

#imgholder {
    height: 100%;
    background: url(image.png) center center no-repeat;
}

【讨论】：

【解决方案2】：

我刚刚为另一个 CSS 主题做了this。看看是不是你要找的。p>

【讨论】：

【解决方案3】：

编辑根据您的额外信息，http://jsfiddle.net/EJM9J/ 就是您想要的。就像任何其他 div 一样，仅在页面中居中。如果你愿意，你可以给它一个背景图片。

不过你需要 Javascript。

【讨论】：

【解决方案4】：

不确定这是否适用于所有浏览器，但它应该适用于较新的浏览器。

CSS：

.container {
position: fixed;
height: 100%;
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical
}

.content {
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-orient: horizontal;
-webkit-box-flex: 1
}

HTML：

<div class="container">
<div class="content">
Stuff to be Centered
</div>
</div>

【讨论】：

【解决方案5】：

虽然有一些破解“谢谢大家”的回应

我用这个排序

背景附件：固定；背景位置：中心；

谢谢大家......

对于一个解释不清的问题，我深表歉意

【讨论】：