How to Make Element Position in Center Fixed in CSS?

How to Make Element Position in Center Fixed in CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

You can use position or transform CSS properties to make an element's position centered and fixed. Below are the examples.

CSS Position Property

A document element's position can be modified using the position CSS attribute. The position of positioned elements is set by their top, right, bottom, and left properties.

Making Element Position in Center Fixed in CSS

The below CSS code uses the position and transform attributes to make the centered class in the center fixed position. Assign centered class to any element and use the following CSS:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Vertically Centered and Fixed using CSS

To make an element centered fixed vertically use the following CSS:

#yourDiv {
  position: fixed;
  width: 500px;
  height: 200px;
  margin: 5% auto; 
  left: 0;
  right: 0;
}