How to center the picture with CSS

This article mainly explains "how to center the picture in CSS". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to center the picture with CSS".

1. Display:table-cell

The HTML code is as follows:

The CSS code is as follows

.img _ wrap {width:700px; height:350px; border:1px dashed # ccc; display: table-cell; vertical-align: middle; text-align: center;} II. Use the background method

Html Code:

CSS Code:

.img _ wrap {width:700px; height:350px; border:1px dashed # ccc; background: url (".. / images/w3cschool.png") no-repeat center center;}

III. Line-height

This method uses the p tag on the outside of the picture to center the picture vertically by setting line-height:

HTML Code:

CSS Code:

.img _ wrap {width:700px; height:350px; border:1px dashed # ccc; text-align: center;} .img_wrap p {width:700px; height:350px; line-height: 350px;} .img_wrap p img {vertical-align: middle;} so far, I believe you have a better understanding of "how CSS centers the picture". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!