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

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

当前回答

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

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

.item{
 align-self: center;
}

预览链接

其他回答

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

/*它把div放到中心*/

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

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

.item{
 align-self: center;
}

预览链接

位置:绝对，然后顶部: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 >

为了让它在ie6中也能正常工作，你必须这样做:

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;
}

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

推荐文章