Centering Web Elements

If you want to center your layout or any other element in your layout or design, with CSS, there is a very basic technique that you can use. Setting the margin attribute to auto will make it automatically adjust to the screen resolution of each device that loads your page. Effectively and consistently placing your element in the middle of the page. This is true for centering a whole layout or centering an element that’s inside, say, a div that uses a percentage for its width.

Wrap everything you want to be centered in a single div or other block element. Use CSS to add margin to both the right and left of the div.

Say this is your div:
<div id="wrapper"> </div>

Using the id of wrapper you could use either one of these versions of the CSS depending on what else you wanted to accomplish with your code:

#wrapper {
margin: auto;
}
#wrapper {
margin: 0 auto;
}
#wrapper {
margin-right: auto;
margin-left: auto;
}

So see? Not so hard after all.
If you were paying attention you might have noticed that this is actually a good example of responsive design. If you are trying to center a whole layout in the middle of a screen, allowing for different screen resolutions is important since there is such a wide variety of devices being used to access the web everyday.

I hope this tutorial helped you out. Don’t hesitate to leave any feedback or check out my other tutorials.