使用 CSS 灵活的居中布局答案

【问题标题】：Flexible center-positioned layouts with CSS使用 CSS 灵活的居中布局
【发布时间】：2012-11-13 17:46:02
【问题描述】：

我想将容器 <div> 标记置于页面中心，使其满足以下条件：

当屏幕宽度大于<div> 的最大宽度时，我希望<div> 在屏幕内水平居中。
当屏幕宽度等于<div> 的最大宽度时，<div> 应该填满整个屏幕。
当屏幕宽度小于<div> 的最大宽度时，<div> 应调整大小以匹配屏幕宽度。

这是否可能仅使用 CSS，或者我需要使用 JavaScript 来实现这种灵活性？

【问题讨论】：

1.例如，您是否想要滚动条？如果没有，你为什么需要这个？如果是 - 只有 javascript
我认为对于#1 和#2，只有 CSS 是可能的。只需使用您的最大宽度。屏幕越大，div 取最大宽度。有屏幕相同的宽度，它将占据全屏。对于#3，尝试设置 max-width:*your width*, width:auto;我不能尝试，但这是我的第一次尝试......

标签： javascript html css layout user-interface

【解决方案1】：

这是否可能仅使用 CSS，或者我需要使用 JavaScript 来实现这种灵活性？

很有可能。

怎么做？

这里的关键是 CSS max-width 属性，以及用于居中的 margin: 0 auto;。

这是一个评论很好的 jsFiddle：little link。

HTML：

<div class = "inner">

</div>

CSS：

.inner {
    margin: 0 auto; /*makes sure the div is centered*/
    max-width: 300px; /*maximum width*/
    width: 100%; /*default*/
    height: 100px; /*just for clarity*/
    background: dodgerblue; /*prettiness*/
}

正如 @Cerbrus 在 cmets 中提到的，margin: 0 auto; 实际上也设置了 margin-top。因此，如果您愿意为 margin-top 设置不同的值，请改用以下值：

margin-left: auto;
margin-right: auto;

【讨论】：

为什么是margin: 0 auto;？如果经验不足的人复制粘贴代码，可能会弄乱他们的上边距。

【解决方案2】：

这将使带有id='myDiv' 的 div 在 600 像素以下的屏幕上拉伸到 100% 宽度，否则它将居中。

#myDiv{
    width:600px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (max-width 600px) {
    #myDiv{
        width:100%;
    }
}

【讨论】：

再说一次，我真的认为媒体查询有点过头了。
考虑到将宽度设置为 100% 可能不是您在实现特定于宽度的 CSS 时想要做的唯一事情，我不同意。我的意思是，如果有人要关心较小的屏幕，出于兼容性原因，他们可能会希望以不同的方式设置更多内容的样式。在这种情况下，媒体查询几乎是唯一的非 js 解决方案，而您只需要一个。
嗯，基本上你是说媒体查询更好，因为你猜测 OP 可能需要它们？哦，那好吧。但 OP 没有提及任何关于移动设备特定样式的内容。

【解决方案3】：

看这个例子-

<div id="container"></div>

CSS-

#container
{
   margin-left:auto;
   margin-right:auto;
   height:500px;
   max-width:400px;
   background-color:yellow;
   min-width:100px;  //ensures that your div will resize to match the width of the screen
}

在此处查看工作演示-http://jsfiddle.net/UgxZe/4/

您可以观察所有需要的 3 个场景。

【讨论】：