Original problem
Centering an element that does not have an explicit width
This prevents the possibility of using the usual margin: 0 auto; solution margin: 0 auto; .
A big problem
There is no unused space to center the wrapper in the container
An element is called compressed if its width is determined by the width of its contents. If the content is resized, the width of the element also changes. This is the default behavior for elements that are inline, inline blocks, or float.
When the contents in a wrapped shrink parent wrapping to the next line, the parent object ceases to be compressed; now it takes up the full width of its container. Technically, the parent is centered as it completely fills the container, but its contents are not centered. And if the parent does not have a noticeable bg image or wallpaper, the parent will also not be centered.
This also applies to some more advanced features like CSS3 flexbox, which seems to prevent this from being an option.
Decision
Media Inquiries
Turns out there is a simple CSS solution. The main problem is that one mock grid of this type cannot support a wide range of screen sizes and still center the content. But with CSS3 multimedia queries , many grid layouts can be created with the appropriate selection based on screen size.
For example, a layout grid is created with 1 column, as well as one with two columns and one with three columns, etc. for the number of columns that may be required. Whichever grid matches the current screen size, the one that was used. Layout grids can be identical, with the exception of a fixed width for each of them, a width that is large enough to match the number of columns. Since each grid has a fixed width, it becomes trivial to center them horizontally using margin: 0 auto; .
In other words, instead of trying to get a single layout to handle the entire range of browser sizes, create a lot of layouts and choose one that can easily handle the current browser size.