Auto margins calculate the total amount of margin surrounding an element, then split it in half, putting half on the right, half on the left.
It isn't necessary to define a width for images. However, you need to tell the browser that the image is a block element. Then you can center it as a block.
Centering with CSS
Whether you need to center a div, a table, an image, or a paragraph, CSS can do the job.
Centering a Div
In the Layout category, define a width for the div. If you are using a fluid layout, use a percentage width so the layout remains flexible. Set the left and right margins to "auto".
The auto margins center the div on the page. This trick also works for figures, articles, sections, tables, or any other HTML block element.
Centering an Image
Images are also centered using "auto" margins. In the Layout category, set the left and right margins to "auto". You don't need to define a width for images, but it is necessary to set display to "block".
Auto margins and display "block" will center the image.
Centering Text
Text can be centered using the text-align:center property.
