How to center an image in css

Methods to center the picture: 1. Use the statement "background-position: half the width of the picture and half the height;"; 2. Use the statement "background-position:50%"; 3. Use "background-position" :center;" statement.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

Css method to center the image:

1. background-position uses pixels to set the background image to be centered (know the size of the background image)

background-position:100px 70px ;  /*宽的一半，高的一半*/

Rendering:

2. Background-position uses 50% to set the background image to be centered, which is very convenient

background-position:50%;

3. Background-position uses center to center the background image, which is very convenient. (The second center can be omitted)

background-position:center center;

The above three setting methods of background-position can all achieve the centering of the background image. The first value of the background-position attribute sets the horizontal position, and the second value sets the vertical position.

Related tutorial recommendations: CSS video tutorial

The above is the detailed content of How to center an image in css. For more information, please follow other related articles on the PHP Chinese website!