javascript - 使用 CSS 灵活的居中布局

Question

我想<div>在页面上居中容器标签，使其满足以下条件：

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

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

Answer 1

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

这是很有可能的。

如何？

这里的关键是 CSSmax-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在评论中提到的那样，margin: 0 auto;实际上margin-top也是如此。因此，如果您愿意为 设置不同的值margin-top，请改用以下内容：

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

Answer 2

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

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

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

Answer 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 个场景。