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

Question

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

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

这只能通过 CSS 实现吗？还是需要使用 JavaScript 来实现这种灵活性？

Answer 1

Is this possible with CSS only, or will I need to use JavaScript to accomplish this kind of flexibility?

很有可能。

如何？

这里的关键是 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;