How to center an element using position:fixed in CSS ?

Last Updated : 06 Mar, 2024

When designing web pages, achieving proper centering of elements is crucial for aesthetics and user experience. In this guide, we’ll see how to center an element using position fixed property in CSS. Whether you’re creating a landing page, a form, or any other web component, understanding these methods will enhance your design skills.

Let’s first create a simple HTML structure with a div container along with h1 and h3 tags inside it. Then we will give some styling.

HTML

<!DOCTYPE html> 
<html lang="en">
   <head>
      <title> 
         How to center a position:fixed element ? 
      </title>
      <style> 
         body { 
         font-family: sans-serif; 
         padding: 0; 
         margin: 0; 
         background-color: black; 
         color: white; 
         } 
         .container{ 
         border: 2px solid white;
         width: 50%;
         } 
         h1 { 
         color: springgreen; 
         } 
      </style>
   </head>
   <body>
      <div class="container">
         <h1>GeeksforGeeks</h1>
         <h3>How to center a position:fixed element?</h3>
      </div>
   </body>
</html>

Now that we have seen the structure of our code, let’s discuss the different examples of centering the element using the position fixed property in CSS.

Examples to Center an Element using position:fixed in CSS

1. Centering Using `top`, `left`, and `transform` Properties:

Example: To center the element, we set the top property and left property to 50% and 50%. That will move the top left corner of the element to the center. Now, because of that the element would not be exactly in the center, rather it’s in the top left corner. Hence, using the translate property, we would shift the element 50% towards the left and 50% towards the top (based on its size).

Set the top to “50%” and left to “50%”.
Now, set the transform property to “translate(-50%, -50%)”.

We have a div element with a position as “fixed” and we have centered it on the screen using the above code.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>
         How to center a position:fixed element ?
      </title>
      <style>
         body {
         font-family: sans-serif; 
         padding: 0; 
         margin: 0; 
         background-color: black; 
         color: white;
         }
         .container {
         border: 2px solid white;
         width: 50%;
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         }
         h1 {
         color: springgreen;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <h1>GeeksforGeeks</h1>
         <h3>How to center a position:fixed element?</h3>
      </div>
   </body>
</html>

Output:

Centering Using top, left, and transform Properties

2. Centering a Fixed-Position Element:

Example: We have created a `<p>` tag with a light green background. By applying `position: fixed;`, the element remains fixed relative to the viewport. Utilizing `top: 50%;` and `left: 50%;` positions the element at the center, while `transform: translate(-50%, -50%);` refines the centering by adjusting the position based on the element’s dimensions.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>
         How to center a position:fixed element?
      </title>
      <style>
         body {
         font-family: sans-serif; 
         padding: 0; 
         margin: 0;
         }
         p {
         background-color: rgba(0, 255, 127, .3);
         width: 25%;
         padding: 5px;
         position: fixed;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         }
         h1 {
         color: springgreen;
         }
      </style>
   </head>
   <body>
      <h1>GeeksforGeeks</h1>
      <h3>How to center a position:fixed element?</h3>
      <p class="child">I am child p tag</p>
   </body>
</html>