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

 

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

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

position: absolute ，然后是top:50% ， 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>

  • 你的意思是你想要垂直还是水平居中？ 你说你指定的height为800px，并希望div不要伸展，当width大于...

  • 水平居中，您可以使用margin: auto; 属性在CSS中。 此外，您必须确保body和html元素没有任何边距或填充： 

    • html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
    链接地址: http://www.djcxy.com/p/7135.html

    上一篇: How to align a <div> to the middle (horizontally/width) of the page

    下一篇: How to avoid this with CSS?