3

我正在尝试将我的内容 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;

}

4

3 回答 3

8

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

JS小提琴

于 2013-06-20T16:22:58.663 回答
4

您可以使用该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/

于 2016-09-27T16:04:10.923 回答
0

使用弹性盒...

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

的HTML

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

在哪里：

  1. p-flexbox表示父flexbox
  2. flex-hcc表示flexbox-horizo​​ntal-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;

}

干杯，莱昂纳多

于 2013-06-20T16:23:21.797 回答