Question

I’d like to center a container <div> tag on a page so that it satisfies the following conditions:

1. When the screen width is greater than the <div>‘s max width, I’d like the <div> to be horizontally centered within the screen.
2. When the screen width is equal to the <div>‘s max width, the <div> should fill the entire screen.
3. When the screen width is smaller than the <div>‘s max width, the <div> should resize to match the width of the screen.

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

Answer 1

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

It’s very possible.

How?

The key here is the CSS max-width property, as well as margin: 0 auto; for centering.

Here’s a rather-well-commented 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*/
}

As @Cerbrus mentioned in comments, margin: 0 auto; actually sets margin-top as well. So if you’re willing to have a different value for margin-top, use the following instead:

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