How to Center a DIV in CSS?

To center a div in CSS, you can use the following code:

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

This code will center the outer_div element both horizontally and vertically on the page. The position: absolute; property is used to position the element relative to its parent container. The left: 50%; and top: 50%; properties are used to move the element to the center of the page. Finally, the transform: translate(-50%, -50%); property is used to adjust the position of the element so that it is perfectly centered.

To center a <div> horizontally and vertically using CSS, you can use the following approach:

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

Position: absolute; positions the <div> relative to the nearest positioned ancestor or the initial containing block.top: 50%; and Left: 50%; position the top-left corner of the <div> at the center of its containing block

Transform: translate(-50%, -50%); Moves the <div> horizontally and vertically by -50% of its own width and height, respectively, effectively centering it both horizontally and vertically.

We can do it by :

#outer_div{

display: flex;

align-items : center;

justify-content : center;

}

#outer_div{

display :flex;

justify content :ceneter

align item : center

}