请帮助我将消息框居中以适合任何屏幕分辨率.. 你能展示我可以使用的 css 或样式、边距、左、右吗？
最佳答案
水平居中
要使 div 水平居中，您可以使用 margin: auto auto; width: 500px 其中宽度是您想要的任何宽度。
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，假设高度为 200px。请参见下面的示例:
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;
}
假设它垂直居中
你也可以给一个固定的margin-top(或者top with position: absolute)让它在大多数桌面看起来垂直居中和笔记本电脑屏幕。
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 占用盒模型中的空间。
<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 plugin您可以将其用于此目的。还有许多 jQuery 插件的唯一目的是将页面中的内容居中。
结论
虽然有多种选择可以实现这一点，但我很遗憾地看到 CSS 仍然不支持这样做。也许跨不同的场景做这件事很难，我不知道。从我上面提到的选项来看，我认为 Javascript 选项是最通用的，并且以当今的浏览器速度，并且很可能没有人会在他们的浏览器上禁用 Javascript，这将是最好的选择。
关于css - 在任何屏幕分辨率上居中消息框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14931410/