居中具有最大宽度的流体 div答案

【问题标题】：Centering fluid div having max-width居中具有最大宽度的流体 div
【发布时间】：2013-06-17 14:26:26
【问题描述】：

我正在尝试使我的内容 div 居中。设置为 100%，div 包含在 body 中，body 也设置为 100%。我有一个 max-width: 1400px ，因为如果屏幕分辨率更高，我不希望我的内容拉伸得更多。问题是，它不能使用 margin: auto。我的内容位于左侧，在大于 1400 像素的屏幕上未居中。

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

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

}

【问题讨论】：

标签： centering fluid-layout css

【解决方案1】：

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

JS Fiddle

【讨论】：

或者干脆margin: 0 auto;

【解决方案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/

【讨论】：

【解决方案3】：

使用弹性盒...

将这些类放在父元素（主体）中：

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;

}

干杯，莱昂纳多

【讨论】：