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

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

当前回答

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

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

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

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

其他回答

你也可以这样使用它:

<div style="width: 60%; margin: 0px auto;">
    Your contents here...
</div>

没有指定div宽度的定心:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

这有点像<center>标签，除了:

所有直接内联的子元素(例如。<h1>)的<center>也将定位到居中根据浏览器默认值，内联块元素可以有不同的大小(与display:block设置相比)

只需在body标签之后使用center标签，并在body结束之前结束center标签:

<body>
    <center>
        ... Your code here ...
    </center>
</body>

在我尝试过的所有浏览器中，这都是可行的。

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

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

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

推荐文章