Sometimes we need to place an element into center absolute position relative to its nearest positioned ancestor in HTML to make it look more presentable. For centering an absolute positioned element in div we use the following examples:
Explanation: Here, left is given 50% to place it in center horizontal. Transform is used to pull back the item with the half of its width to place it exactly in the center from the middle of the element. left: 50% is relative to the parent element while the translate transform is relative to the elements width/height.
Explanation: Here left and top are given 50% to place it in the center horizontally and vertically. Transform is used to pull back the item with the half of its width to place it exactly in the center from the middle of the element. Therefore transform:translate is given -50% for both horizontal and vertical to adjust it centrally.
- How to center a div within another div?
- How to horizontally center a div using CSS?
- How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS?
- Differences between HTML <center> Tag and CSS "text-align: center;" Property
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to clear all div's content inside a parent div ?
- Display div element on hovering over <a> tag using CSS
- How to hide/visible the backside of a rotated div element using CSS ?
- How to align a logo image to center of navigation bar using HTML and CSS ?
- Making a div vertically scrollable using CSS
- How to align content of a div to the bottom using CSS ?
- How to auto-resize an image to fit a div container using CSS?
- How to give a div tag 100% height of the browser window using CSS
- How to place two div side-by-side of the same height using CSS?
- How to position a div at the bottom of its container using CSS?
- How to make div not larger than its contents using CSS?
- How to float three div side by side using CSS?
- How to make div height expand with its content using CSS ?
- How to make a div fill a remaining horizontal space using CSS?
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.