CSS Margin Auto to Centre Elements
Elements on web pages are usually (like here on medium.com) centred to improve readability. Knowing how to do this well ensures that you have a good foundation on which to build the rest of your design.
- Create the Parent element styles
Most pages will have a wrapper that acts as a container around the rest of the children or nested elements. You can assign it in the following way. Having its width as a percentage makes sure it is responsive across different screen sizes.
2. Add Column styles
width attribute as a percentage of the parent element and use
margin: auto to centre the element horizontally.
3. Add the Parent and Child HTML tags
div elements with the CSS class
wrapper and add nested child elements with CSS class
I have added some basic CSS styling to the
.colto show how the page can be developed further. See the complete code and result on Code pen: