协慌网

 登录 贡献 社区

如何将 <div> 与页面的中间（水平 / 宽度）对齐

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

答案

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

position: absolute然后top:50% and left:50%将顶边放在屏幕的垂直中心，左边放在水平中心，然后通过将margin-top添加到 div 的高度的负值，即 - 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 年的方式.adizious 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>