How to center an image in css

Css method to center the image: 1. Set ""; 2. Set the css code; 3. Set the style for the parent element; 4. Set the Img Just set "max-width:100% max-height:100%".

The operating environment of this article: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

css Centers the Image

css Centers the Image No matter it is a square, vertical or horizontal image, you can center the image under the parent frame, that is The square image occupies the entire parent frame; the horizontal image is padded left and right, top and bottom centered; the vertical image is padded left, right, center, top and bottom

1. The html is as follows:

    
        <p>
            <img  src="/static/imghwm/default1.png" data-src="katong.png" class="lazy" alt="How to center an image in css" >  /*这里的图片路径自己设置*/
        </p>
    

2. The css is as follows

	body{
		
		background-color: gray;
	}

	#redblock{
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		width:400px;
		height: 400px;
		background-color: red;
		
	}

	img{
		max-width: 100%;
		max-height: 100%;
	}

3. Set the style for the parent element:

a. Set the width and height width, height

b. Set text-align:center vertical-align:middle

c. Set display:table-cell

4. Set max-width:100% for Img max-height:100%

5. The display effect is as follows:

    Horizontal chart

## Square chart

##Vertical picture

## Recommended Learn:
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!