How to center a "position: absolute" element?

We can easily center an absolute position element horizontally and vertically in Python. For that, use the following CSS properties.

For horizontal center, use the following properties ?

  • left
  • margin-left

For vertical center, use the following properties ?

  • top
  • margin-top

Horizontal center an absolute position element

Example

To horizontal center an absolute position element, use the following code ?

<!DOCTYPE html>
<html>
<head>
   <style>
      div.center{
         width:200px;
         height: 50px;
         left:50%;
         margin-left:-100px;
         position:absolute;
         background: yellow;
         text-align: center;
      }         
   </style>
</head>
<body>
   <h1>Positioning an Element</h1>
   <div class='center'>
      This is centered horizontaly
   </div>
</body>
</html>

Output

Vertical center an absolute position element

Example

To vertical center an absolute position element, use the following code ?

<!DOCTYPE html>
<html>
<head>
   <style>
      body,html{
         min-height:100%;
      }
      div.center{
         width:200px;
         height: 50px;
         top:80%;
         margin-top:-100px;
         position:absolute;
         background: yellow;
         text-align: center;
      }            
   </style>
</head>
<body>
   <h1>Positioning an Element</h1>
   <div class='center'>
      This is centered vertically
   </div>
</body>
</html>

Output

Horizontal & Vertical center an absolute position element

Example

To horizontal and vertical center an absolute position element, use the following code ?

<!DOCTYPE html>
<html>
<head>
   <style>
      body,html{
         min-height:100%;
      }
      div.center{
         width:200px;
         height: 50px;
         left:50%;
         top:50%;
         margin-left:-100px;
         margin-top:-25px;
         position:absolute;
         background: yellow;
         text-align: center;
      }         
   </style>
</head>
<body>
   <h1>Positioning an Element</h1>
   <div class='center'>
      This is centered vertically and horizontally
   </div>
</body>
</html>

Output

Updated on: 2022-12-06T09:46:14+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements