To center an HTML element horizontally you need to specify the width of the parent element. Similarly to center an HTML element vertically you need to specify the height of the parent element. Again to center an element horizontally as well vertically you need to specify the height and width of the parent element.
Now specifying the height and width can be tricky and you can achieve it in different ways.
Example 1: By specifically giving height and width to the parent element.
Example 2: Using Bootstrap classes (Specifying width of child)
Example 3: Using Bootstrap classes (Using bootstrap flexbox classes)
- HTML | Viewport meta tag for Responsive Web Design
- Making a div vertically scrollable using CSS
- How to vertically center text with CSS?
- How to vertically and horizontally align flexbox to center ?
- How to align objects vertically when working with grids in CSS ?
- How to vertically align text inside a flexbox using CSS?
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
- How to align buttons in Card footer in Bootstrap ?
- How to use links on card-img-overlay class in Bootstrap 4 ?
- How to display multiple horizontal images in Bootstrap card ?
- CSS | bottom Property
- CSS padding-bottom Property
- Web API | DOMRect bottom property
- CSS margin-bottom Property
- PHP | SplDoublyLinkedList bottom() Function
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. 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.