How to center the absolutely positioned element in div using CSS? Last Updated : 22 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report Centering an absolutely positioned element in a div using CSS involves adjusting the position both vertically and horizontally. By using a combination of the top, left, and transform properties, we can ensure the element is perfectly centered within its container. This method creates a balanced and visually appealing layout on the page.Using top, left, and transform PropertiesThis approach centers an absolutely positioned element by setting top: 50% and left: 50%, which moves the element's top-left corner to the center of the container. To fully center the element itself, we apply transform: translate(-50%, -50%), which shifts the element back by half its width and height for perfect centering.Syntax.element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}Example: In this example, the image is centered inside the outer div using top: 50%, left: 50%, and transform: translate(-50%, -50%). The outer div has position: relative, which allows the image to be perfectly centered both horizontally and vertically. HTML <!DOCTYPE html> <html> <head> <style> .content { height: 400px; position: relative; border: 4px solid green; } .content img { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> </head> <body> <p> Centering an absolute positioned element inside a div both horizontally and vertically </p> <div class="content"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"/> </div> </body> </html> Output: Note: This method has some drawbacks. The absolutely positioned element needs to be carefully placed to stay inside the container or browser window and avoid overlapping with other elements. Also, if the container's size changes, the element might not stay perfectly centered. Comment More infoAdvertise with us Next Article How to center the absolutely positioned element in div using CSS? P prakhar7 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads How to Position a Fixed Element in the Top Right Corner using CSS ? In CSS, Positioning the fixed element in the top fight corner consists of maintaining the fixed position of the element by using Absolute Positioning or by using Flexbox Layout. These are the following methods: Table of Content Using Absolute PositioningUsing FlexboxUsing Absolute PositioningIn this 2 min read How to position a div at the bottom of its container using CSS? The ability to position a <div> at the bottom of its container is a common requirement in modern web design—used in approximately 60–70% of responsive layouts for elements like footers, buttons, and captions. It ensures that the content stays aligned with the lower boundary of its parent conta 3 min read How to centre an Element using Tailwind CSS ? Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of "margin" and "flex". This article will g 3 min read How to use the position property in CSS to align elements ? In this article, we will learn how to use the position property in CSS to align elements. We can align elements using position property using CSS with some helper property of it. Approach: The position property is used to set the position of the element. We can align elements using position property 2 min read How to Align Form Elements to Center using Tailwind CSS? Form elements are parts of a webpage that let users enter information. They include things like text boxes, checkboxes, radio buttons, dropdown menus, and buttons. To center form elements using Tailwind CSS, use classes like flex, items-center, and justify-center on a parent container.These are the 2 min read Like