How to center the picture in css

This article mainly explains "how to center a picture in css". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to center a picture in css.

First, let's take a look at how css pictures are centered horizontally.

1. Use margin:0auto to achieve the horizontal center of the picture.

Css image horizontal center code:

2. Using the horizontal center attribute text-align:center of the text to realize the horizontal center of the picture.

Css image horizontal center code:

2. Let's take a look at the implementation of vertical centering of css images.

1. Use height = = row height to realize the vertical center of the picture.

The vertical center code of css image is as follows:

Note: this method needs to indicate the height before it can be used.

2. Use table to realize the vertical center of the picture.

The vertical center code of css image is as follows:

Note: this method takes advantage of the vertical center attribute of table

Note: here display:table; and display:table-cell; are used to simulate table. This method is not compatible with IE6/IE7,IE67 and does not support display:table. If you do not need to support IE67, you can use it.

This approach has a drawback: when you set up display:table;, it may change your original layout.

3. Realize the vertical center of the picture by using absolute positioning.

The vertical center code of css image is as follows:

Description: you can use this method if you know the width and height of the picture.

At this point, I believe you have a deeper understanding of "how to center a picture in css". 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!