我有一个div标签,宽度设置为800像素。当浏览器宽度大于800像素时,它不应该拉伸div,但应该将它带到页面的中间。


当前回答

如果你的中心内容深在其他div,那么只有边缘可以拯救你。什么都没有。当我不使用Bootstrap这样的框架时,我总是面临这个问题。

其他回答

您的意思是要垂直居中还是水平居中?你说你指定高度为800像素,并希望div在宽度大于该值时不拉伸…… 要水平居中,可以使用margin: auto;属性。此外,你还必须确保body和html元素没有任何边距或填充:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

在我的情况下,手机屏幕大小是未知的,这是我所做的。

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();
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

使用下面的代码将div框居中:

.box-content { 保证金:汽车; 上图:0; 右:0; 底部:0; 左:0; 位置:绝对的; 宽度:800 px; 身高:100 px; 背景颜色:绿色; } < div class = " box-content”> < / div >

使用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 >