Agfdhyk

When a design is fluid (there is no fixed width), how can wrapper div using margin:0 auto; be centered?

#wrapper {

  max-width: 1000px;

  min-width: 767px;

  margin: 0 auto;

}

The max-width:1000px; means: make a container that has a maximum with of 1000px. If the page is larger (as an users uses a wider window) it'll fill the other part with white space.

The min-width:767px will then set the minimum. So if the users has a smaller window then 1000px then the container doesn't fit. So it'll decrease it's size automatically to a minimum of (in this case) 767px. If the users still has a smaller window, then a scrollbar will appear. The container will be set to 767px.

If an user is loading the page in between the max-width and min-width, then it'll take the maximum width available. Please see the "To be more precise an example per case" section below for more information about this topic.

As you're using margin:0 auto; on this #wrapper. The #wrapper will be centered with no margin on top of bottom. So instead of the whitespace on the right side which will be set on default, now the white space will be shared on both: left and right side of the container.

I made an example with a lower width then your question in the example below to show that it'll become centered. This is all because of the combination of: max-width which is smaller then the window-size of the user (box below) and the margin: 0 auto; which will try to center the div when possible.

#wrapper {

  max-width: 200px;

  min-width: 100px;

  margin: 0 auto;

  height:50px; /* added this as example */

  background:red; /* add this as example */

}

<div id="wrapper"></div>

To be more precise an example per case:
Note (pre-condition): The cases below are when the div is as main-element in the page. So no other elements that have effect on the #wrapper-element. Just like the code examples in this post.

• User has a browser that has a size of 1100px width: The #wrapper will have a width of 1000px and there will be 50px of whitepace left and 50px of whitespace right. (see the above code example).


• User uses a browser that has a size of: 920px width: The #wrapper will have width of 920px; and there will be no whitespace on the left and right side.


• User uses a browser that has a size of: 600px width: The #wrapper will have width of 767px; and there will be no whitespace on the left and right side. Beside that the user will have a scrollbar on the bottom of it's page to be able to see the complete #wrapper. See the code example below for the scrollbar:

#wrapper {

  max-width: 5000px;

  min-width: 1000px;

  margin: 0 auto;

  height:50px; /* added this as example */

  background:red; /* add this as example */

}

<div id="wrapper"></div>

You can try this:-

#wrapper {

  display: block;

  max-width: 1000px;

  min-width: 767px;

  margin: 0 auto;

}

You can use Flexbox.

Set the following properties on the parent element of the element you want to center

display: flex;

justify-content: center;   // for horizontally center 

align-items: center;       // for vertically center