Four Simple Ways to Center a DIV Using Modern CSS Techniques

Centering a div is a common challenge in web layout. Below is a basic HTML structure and base CSS that defines a parent container and a child element.

<div class="parentElement">
  <div class="childElement"></div>
</div>

.parentElement {
  width: 300px;
  height: 300px;
  background-color: rgb(128, 128, 128);
}
.childElement {
  width: 100px;
  height: 100px;
  background-color: rgb(52, 54, 97);
}

Method 1: CSS Grid

Apply grid layout to the parent and center its content.

.parentElement {
  display: grid;
  justify-content: center;
  align-content: center;
}

Result:

Method 2: Flexbox

Use flexbox on the parent with the same centering properties.

.parentElement {
  display: flex;
  justify-content: center;
  align-content: center;
}

Result:

Method 3: Margin Auto

Set the parent to a flex container and let the child use margin: auto to center itself.

.parentElement {
  display: flex;
}
.childElement {
  margin: auto;
}

Result:

Method 4: Absolute Positioning with Transform

Make the parent relatively positioned and the child absolutely positioned, then shift it with transform.

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

Result:

These four techniques provide reliable ways to center a DIV both horizontally and vertically, useful for interviews, quick prototypes, or production code.