Given an image and the task is to set the image to align to center (vertically and horizontally) inside a bigger div. It can be done by using the position property of the element.
Example 1: This example uses position property to make the image align to center.
Example 2: This example uses center property to set the image to center in a div.
- How to vertically and horizontally align flexbox to center ?
- How to vertically align text inside a flexbox using CSS?
- How to horizontally center a div using CSS?
- Making a div vertically scrollable using CSS
- How to vertically center text with CSS?
- How to get card vertically centered between search bar and bottom of the viewport?
- Convert an image into grayscale image using HTML/CSS
- How to dynamically load JS inside JS ?
- Index inside map() Function
- CSS | page-break-inside Property
- What purpose does a <script> tag serve inside of a <noscript> tag?
- CSS to put icon inside an input element in a form
- Where is an object stored if it is created inside a block in C++?
- Add the slug field inside Django Model
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.