How to center img image with css? The display attribute of css implements image centering (code example)

When we develop the front-end page, in order to make the page beautiful, the image will be centered. So how to center the img image with css? This article will show you how to center the img image with css? The display attribute of css implements image centering (code example), so that everyone can understand and master the two methods of setting the display attribute of css to center the img image. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s take a look at the two methods ofdisplay attribute to achieve image centeringWhat are they?

1. Use thetable-cellattribute value of display, and then cooperate withtext-align: center;andvertical-align: middle;Set the image to be centered

2. Setdisplay: flex;, and useelastic layout flexto set the centering of the img image

Let’s follow Through simple code examples, let's learn more about how these two methods achieve image centering.

1. Usedisplay:table-cellto achieve horizontal and vertical centering of img tag images

Rendering:

Instructions:

Setting display: table-cell; in the demo box will cause the demo box to be displayed as a table cell (similar toand). When setting text -align: center; will center the img image horizontally, and set vertical-align: middle; to center the img image vertically.

2. Flexible layout flex

Rendering:

Description:

Set display: flex; to implement flex elastic layout, set justify-content: center; to align the image horizontally and center, and set align-items: center; to align the image vertically and center.

Summary: The above is a complete introduction to the two methods of using the display attribute of css to center images. I hope it will be helpful to everyone's learning. For more related tutorials, please visitCSS3 Video Tutorial,Html5 Video Tutorial,bootstrap Video Tutorial!

The above is the detailed content of How to center img image with css? The display attribute of css implements image centering (code example). For more information, please follow other related articles on the PHP Chinese website!