In this section, we will learn what the object-position property is and how to use it in CSS.
How to Center an Image in CSS: CSS object-position Property Definition and Usage
The CSS `object-position` property is used to set the content position for elements like <iframe>, <img>, <embed>, and <video>.
CSS object-position Property Syntax
object-position: Horizontal-position Vertical-position;
CSS object-position Property Value
Horizontal-Position: The first value of this property defines the horizontal position of the content within its container box. This value can be either (Left, Right, Center) or any number with CSS supported units.
Vertical-Position: The second value of this property defines the vertical position of the content within its container box. This value can be either (Top, Center, Bottom) or any number with CSS supported units.
- The position (0,0) is equal to left top corner of the target container element.
- The two global values, “initial” and “inherit” can also be used for this property.
Example: center an image CSS
How Does CSS object-position Property Work?
In this example, the value of the object-position is set to “center” which basically means horizontally and vertically the target image should be centered in its container element.
That’s how this image is centered in its container element.
Example: center align an image
This time, the image is just horizontally centered in its container, but vertically it is set to the top of the container (because of the value “top”).