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

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

当前回答

旧代码中其他一些预先存在的设置将阻止div页面居中L&R:

隐藏在外部样式表链接中的其他类。其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。带有id和/或CLASSES的图例代码将与命名div类冲突。

其他回答

.middle {
   margin:0 auto;
   text-align: center;
}

/*它把div放到中心*/

没有指定div宽度的定心:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

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

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

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

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

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

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

位置:绝对，然后顶部:50%和左侧:50%将顶部边缘置于屏幕的垂直中心，左侧边缘置于水平中心，然后通过将margin-top添加到div高度的负数，即-100将其向上移动100，同样，margin-left也是如此。这使得div正好位于页面的中心。

# outPopUp { 位置:绝对的; 宽度:300 px; 身高:200 px; z - index: 15; 上图:50%; 左:50%; Margin: -100px 00 -150px; 背景:红色; ｝ < div id = " outPopUp " > < / div >

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

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

推荐文章