我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但应该将它带到页面的中间。
当前回答
在我的情况下，手机屏幕大小是未知的，这是我所做的。
HTML
<div class="loadingImg"></div>
CSS
.loadingImg{
position: fixed;
top: 0px;
left: 0px;
z-index: 9999999;
border: 0;
background: url('../images/loading.gif') no-repeat center;
background-size: 50px 50px;
display: block;
margin: 0 auto;
-webkit-border-radius: 50px;
border-radius: 50px;
}
JavaScript(在需要显示此DIV之前)
$(".loadingImg").css("height",$(document).height());
$(".loadingImg").css("width",$(document).width());
$(".loadingImg").show();
其他回答
使用justify-content和align-items水平和垂直对齐div
https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items
超文本标记语言 的身体, .container { 高度:100%; 宽度:100%; ｝ .container { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ .mydiv { 宽度:80 px; ｝ < div class = "容器" > <div class="mydiv">h & v aligned</div> < / div >
将这个类添加到你想居中的div(它应该有一个设置的宽度):
.marginAutoLR
{
margin-right:auto;
margin-left:auto;
}
或者，添加边缘到你的div类，像这样:
.divClass
{
width:300px;
margin-right:auto;
margin-left:auto;
}
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Div在父元素中垂直和水平居中，不固定内容大小
在这个页面上有一个很好的概述，有几个解决方案，太多的代码在这里分享，但它显示了什么是可能的…
就我个人而言，我最喜欢这个著名的转换转换-50%技巧的解决方案。它适用于固定(%或px)和未定义的元素高度和宽度。 代码非常简单:
HTML:
<div class="center"><div>
CSS:
.center {
position: absolute;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome*/
-o-transform: translate(-50%, -50%); /* Opera */
transform: translate(-50%, -50%);
/* optional size in px or %: */
width: 100px;
height: 100px;
}
这里有一把小提琴，展示了它的工作原理
<div></div>
div {
display: table;
margin-right: auto;
margin-left: auto;
}
