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


当前回答

这可以通过flex容器轻松实现。

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

预览链接

其他回答

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

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

将这个类添加到你想居中的div(它应该有一个设置的宽度):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

或者,添加边缘到你的div类,像这样:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

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

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

出于某种原因,之前的答案对我都不起作用。这对我来说很管用,而且在不同的浏览器中也同样适用:

.center {
    text-align: center;
    height: 100%;

    /* Safari, Opera, and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Internet Explorer 10 */
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;
}