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

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

答案

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

position: absolute ,然后top:50%left:50%将顶部边缘放在屏幕的垂直中心,左侧边缘在水平中心,然后通过向 div 高度的负值添加margin-top ,即 - 100 将其向上方移动 100,对于margin-left 。这将使div完全位于页面的中心。

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>

现代Flexbox解决方案是从 2015 年开始使用的方法。justify justify-content: center用于父元素,以将内容与其中心对齐。

的 HTML

<div class="container">
  <div class="center">Center</div>
</div>

的 CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

输出量

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>

  1. 您是说要垂直或水平居中吗?您说您将height指定为 800 像素,并希望 div 在width大于该width时不拉伸...

  2. 要水平居中,可以使用margin: auto; CSS 中的属性。另外,您还必须确保bodyhtml元素没有任何边距或填充:

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

要使其在 Internet Explorer 6 中也能正常工作,您必须执行以下操作:

的 HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

的 CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}
<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

您也可以像这样使用它:

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

div 在父级内部垂直和水平居中,但不固定内容大小

此页面上的概述非常不错,其中包含几种解决方案,此处太多代码无法共享,但是它显示了可能的解决方案...

我个人最喜欢使用著名的转换转换 - 50%技巧的解决方案 。它对于元素的固定(%或 px)以及未定义的高度和宽度都适用。
代码很简单:

HTML:

<div class="center"><div>

CSS:

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* for IE 9 */
  -webkit-transform: translate(-50%, -50%); /* for Safari */

  /* optional size in px or %: */
  width: 100px;
  height: 100px;
}

这是一个表明它有效的小提琴

只需在body标签之后使用center标签,并在body结尾之前结束center标签即可:

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

这对我尝试过的所有浏览器都有效。

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

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

.item{
 align-self: center;
}

预览链接