To center an image along X-axis i.e. Horizontally and along Y-axis i.e. vertically we can use different CSS properties.

There are different ways to center an Image Vertically and Horizontally including CSS flexbox properties, absolute positioning, and CSS Grid System.

Approach 1: Using Flexbox

To center an image along the X-axis and Y-axis, use “flex” and wrap up the image into a div container and define some height if you are using it alone to center an image. After that define “justify-content” to “center” along X-axis (Horizontally) and “align-items” to “center” along the Y-axis ( Vertically).

Syntax for Flexbox Positioning:

display: flex;
justify-content: center;
align-items: center;

Example: Illustration of making an Image Center Vertically and Horizontally Using Flexbox Properties

Output:

Output

Approach 2: Using Absolute Positioning

Use absolute positioning of an image to make it center from X-axis and Y-axis. To, position an element “absolute” firstly, position its parent element as “relative“. then, define the position of the image element from the top, left, right, and bottom.

Syntax for absolute positioning:

position: relative;
position: absolute;

Example: Illustration of making an Image Center Vertically and Horizontally using positioning absolute.

Output:

Output

Approach 3: Using Grid

To center an image along the X-axis and Y-axis, use a “grid” and wrap up the image into a div container and define some height if you are using it alone to center an image. After that define “justify-content” to “center” along X-axis i.e. Horizontally and “align-items” to “center” along Y-axis (Vertically).

Syntax for Grid Positioning:

display: grid;
justify-content: center;
align-items: center;

Example: Illustration of making an Image Center Vertically and Horizontally Using Grid

Output:

Output