Question

我正试图将我的内容div放在中心位置。它设置为100％，div包含在body中，也设置为100％。我有一个最大宽度：1400px，因为如果屏幕分辨率更高，我不希望我的内容拉伸得更多。问题是，使用margin：auto不起作用。我的内容位于左侧，在屏幕上不超过1400px。

如果删除最大宽度，一切都完全集中在宽屏幕上，但内容被拉伸到整个屏幕......

#content {
width: 100%;
height: auto;
position: absolute;
top: 400px;
margin: 0 auto;
margin-top: 50px;
display: none;
max-width: 1400px;

}

Answer 1

实现此目的的最简单方法是将width属性设置为您需要的最大宽度，然后添加max-width: 100%;。这样可以防止它大于100％但仍然达到最大宽度。此外，您应该删除absolute定位：

JS Fiddle

Answer 2

您可以使用transform技术，该技术不需要额外的标记或媒体查询。

#content {
    position: relative;  /* 'fixed' will work also. */
    max-width: 500px;    /* Your required width here. */
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

这是一个演示https://jsfiddle.net/matharden/6uduf7av/

Answer 3

使用Flexbox ...

将这些类放在父元素（正文）中：

HTML

<body class="p-flexbox flex-hcc">
 <!-- The content -->
</body>

其中：

p-flexbox 表示 parent-flexbox
flex-hcc 表示 flexbox-horizontal-center-center

CSS

.p-flexbox {
   display: -webkit-box;
   display: -moz-box;
   display: box;
}

.flex-hcc {

   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: center;

   -moz-box-orient: horizontal;
   -moz-box-pack: center;
   -moz-box-align: center;

   box-orient: horizontal;
   box-pack: center;
   box-align: center;

}

干杯，莱昂纳多

定心流体div具有最大宽度

3 个答案: