如何将<div>对齐到页面的中间(水平/宽度)

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

当前回答

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

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

其他回答

<div></div>

div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

父母{ 位置:相对; ｝孩子{ 位置:绝对的; 左:50%; 变换:translateX (-50%); ｝ <父> <孩子> 儿童> < / 父> < /

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

如果你想改变垂直位置，改变250的值，你可以根据你的需要安排内容。不需要给出宽度和其他参数。

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

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

.item{
 align-self: center;
}

预览链接

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

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

推荐文章