How to Center Div Using Transform in CSS?

How to Center Div Using Transform 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 the transform CSS property to rotate, scale, skew, or translate an element. It alters the CSS visual formatting model's coordinate space. Here we will give an example to center a Div using the transform property in CSS.

Center a Div Using Transform in CSS Example

Specify a class to Div element, for example, align_center, and use the below CSS to make it to the center using the transform property.

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

HTML for DIV Element

<div class="align_center">
   <p>your content goes here.</p>
</div>