How to Center Div Using Transform in CSS?

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>

Leave a Comment