灵活的中心定位布局与CSS

Question

我想将一个容器<div>标记集中在一个页面上，以便它满足以下条件：

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

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

Answer 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 一样，margin: 0 auto;实际上也设置了margin-top。因此，如果您愿意为margin-top设置不同的值，请改用以下内容：

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

Answer 2

这将使您的div id='myDiv'在600px以下的屏幕上拉伸至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种情况。