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.

  1. 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.

.wrapper {
width: 100%;
}

2. Add Column styles

Add a width attribute as a percentage of the parent element and use margin: auto to centre the element horizontally.

.col {
width: 60%;
margin: auto;
}

3. Add the Parent and Child HTML tags

Add the div elements with the CSS class wrapper and add nested child elements with CSS class col .

<div class='wrapper'>
<div class='col'>column</div>
<div class='col'>column</div>
</div>

I have added some basic CSS styling to the body and .colto show how the page can be developed further. See the complete code and result on Code pen:

CSS Margins Auto (codepen.io)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store