Home » CSS » CSS using ‘margin auto’ but won’t centre

CSS using ‘margin auto’ but won’t centre

So you are trying to be a good web developer and using CSS to centre an element within your website design. You are using something similar to below to centre your image or div and it refuses to centre?

margin:auto;
margin: 0 auto;

Basically if the browser is  told how big it is, then it can figure out how to centre it inside the outer container.  Useful if it knows the outer container size too.

Exact width solution using pixels

Less responsive, but try adding some width information like this

width:xxxpx;

where xxx is the width of the element you are trying to centre. If this works you are on the right track with solving your centering problem. You may also be able to use max-width or min-width etc.

Using percentage size solution

Ok try using a precentage smaller than the outer element that contains what you are trying to centre.  e.g. The outer div container is 1000px and the div you want to centre inside it is 800px. Set the the latter’s width to 80%.

width:80%;

The outer might be width:100%, so try 80% width for the object you are centering too.

Like I said if the browser is  told how big it is then it can figure out how to centre it.

Display Block

 

Also try setting display to block

 display:block;

 

Support