html - Resizing and centering an image using CSS

Question

My scenario:

• I have an image of size 1900 x 1600 pixels.
• I have a div of size 200 x 150 pixels.

I have resized the image using the following CSS:

max-width:300px;
max-height:300px;

The height will be kept in proportion, so in this example it will be 252 px.

How can I center the image in the div? I mean something like:

background-position: center center;

Is this sort of thing possible with CSS 2?

Answer 1

You mean

background:url("test.png");
background-size: 300px auto;
background-position: center center;

?

Answer 2

To center the DIV within an element, you would set a width and margin with the left and right margins set to auto:

div { margin: 0 auto; width: 300px; }