float is designed to move an element to the side and let content that follows it flow up beside it.
It is a terrible tool to try to use for any other kind of layout.
For a long time, it was about the only tool we had for layout, but we’ve had Flexbox (for single dimension layouts) for years and support for Grid (for two dimension layouts) has good support these days.
Also, consider representing you list using actual list markup (ul/ol/li) instead of divs. Divs are generic block elements that should only be used as a last resort if no other HTML element has semantics that describe your content.
Solution 2 :
As another answer mentions, Flexbox is the modern option for laying out data and aligning it. In this case, Flexbox would be the better option, but this is without Flex.
First there is no need for float: left. You can replace with display: inline-block. margin: 0 auto with a width will center the container inside the page. You then add text-align: center to center the content inside the container <div>.
It says in center now, but when the browser is adjusted, the page stays in the same way without aligning automatically.
Comment posted by warren8114
Do you have any suggestion to fix that?
Comment posted by cela
@warren8114 we would have to see more of your code. Based on the code in your current answer, it is working. Is it not centering in really small viewports?
Comment posted by warren8114
I added this flex-wrap: wrap; and it worked. Thanks for your help guys.