3

请帮助我将消息框置于适合任何屏幕分辨率的中心。你能显示我可以使用的 CSS 或样式、边距、左、右吗？

4

4 回答 4

9

水平居中

要使 div 水平居中，您可以使用margin: auto auto; width: 500px宽度为您想要的任何宽度的位置。

JS小提琴

HTML：

<div id="content">
    Some content
</div>

CSS：

#content {
    width: 200px;
    margin: auto auto;
    background-color: #CCC;
}

固定尺寸的中心屏幕

如果您可以修复内容的高度和宽度，则可以仅使用 css 将 div 水平和垂直居中。这是通过将您的内容包装在另一个 div 中来实现的，然后定位您的内容 div top: 50%，然后从中减去它的边距的一半高度：margin-top: -100px假设高度为 200 像素。请参见下面的示例：

JS小提琴。

HTML：

<div id="wrapper">
    <div id="content">
        Some content
    </div>
</div>

CSS：

#wrapper {
    position: relative;
    background-color: #EEE;
    width: 200px;
    height: 200px;
    font-size: 10px;
}
#content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
    background-color: #DDD;
}

假装它是垂直居中的

您也可以给定一个 fixed margin-top（或topwith position: absolute），使其在大多数台式机和笔记本电脑屏幕中看起来垂直居中。

JS小提琴

HTML：

<div id="content">
    Some content
</div>

CSS：

#content {
    width: 200px;
    margin: 100px auto;
    background-color: #CCC;
}

使用 Javascript

仅使用 css 无法以任意高度垂直居中内容。在这种情况下，您将需要使用 Javascript 来定位 div。：

基本思想是：

  • 您在需要显示内容或加载内容时计算内容的高度。
  • 然后更改许多 css 属性中的任何一个以将 div 定位在垂直中心。

我个人的偏好是你position: absolute与top财产一起使用。您也可以使用margin-top，但如果页面上有其他内容，您可能不希望此 div 占用盒子模型中的空间。

JS小提琴

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var el = $('#content');
    var elWidth = el.width();
    var elHeight = el.height();

    el.css({
        position: 'absolute',
        top: (windowHeight / 2) - (elHeight / 2),
        left: (windowWidth / 2) - (elWidth / 2),
    });
});
</script>
<style>
#content {
    width: 200px;
    height: 200px;
    background-color: #CCC;
}
</style>
</head>
<body>
<div id="content">
    Some content
</div>
</body>
</html>

使用许多可用的 Javascript“插件”中的任何一个

网络上有大量的 CSS 框架，它们提供了我们在大多数网站上使用的样板 CSS。其中一些还有助于解决小型 Javascript 插件的此类常见演示问题。就我个人而言，我知道Twitter Bootstrap提供了一个Modal 插件，您可以将其用于此目的。还有许多 jQuery 插件仅用于将页面中的内容居中。

结论

尽管有很多选择可以实现这一点，但我很遗憾地看到 CSS 仍然不支持这样做。也许在不同的情况下很难做到，我不知道。从我上面提到的选项中，我认为 Javascript 选项是最通用的，并且以今天的浏览器速度，以及没有人会在他们的浏览器上禁用 Javascript 的可能性，这将是最好的方法。

于 2013-02-18T08:13:07.460 回答
2

我刚刚在CSS 技术页面上阅读了如何做一个之后才看到这一点。

基本上，定义一点 CSS：

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

优点：

  • 跨浏览器（包括IE8-10）

  • 没有特殊的标记，最少的样式

  • 响应百分比和最小值/最大值

  • 使用一个类来居中任何内容

我没有时间测试它，但我想在这里发布它，希望它可以帮助其他人。

于 2013-12-04T22:36:36.307 回答
0

这是您正在搜索的内容http://tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/

您可以使用 jquery 轻松实现！或者使用本网站提供的 CSS 解决方案！

于 2013-02-18T07:36:29.920 回答
0

您应该向我们提供您尝试过的代码。假设您有如下 HTML 代码：

<div id="message">
   Hello World!
</div>

CSS 代码：

#message {
   width: 100px;
   height: 100px;
   margin: 50px auto;
}

然后，您的消息框将距离屏幕顶部 100x100 和 50px，并自动与屏幕中心对齐。

于 2013-02-18T07:37:05.363 回答