我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但应该将它带到页面的中间。
当前回答
这也适用于ie浏览器，但汽车的利润率就不行。
.centered {
position: absolute;
display: inline-block;
left: -500px;
width: 1000px;
margin: 0 50%;
}
其他回答
您的意思是要垂直居中还是水平居中?你说你指定高度为800像素，并希望div在宽度大于该值时不拉伸…… 要水平居中，可以使用margin: auto;属性。此外，你还必须确保body和html元素没有任何边距或填充:
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
Flexbox解决方案是2015年的发展方向。Justify-content: center用于父元素将内容对齐到它的中心。
HTML
<div class="container">
<div class="center">Center</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
}
输出
.container { 显示:flex; justify-content:中心; ｝ .center { 宽度:400 px; 填充:10 px; 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; ｝ < div class = "容器" > <div class="center"> div居中，文本左对齐 < / 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();
为了让它在ie6中也能正常工作，你必须这样做:
HTML
<body>
<div class="centered">
centered content
</div>
</body>
CSS
body {
margin: 0;
padding: 0;
text-align: center; /* !!! */
}
.centered {
margin: 0 auto;
text-align: left;
width: 800px;
}
