How do you center align a div inside another div?

 To center align a <div> inside another <div>, you can use CSS. Here are the most common methods:

---

1. Using Flexbox (Recommended for modern layouts)

Flexbox is a versatile and widely supported approach.

<div style="display: flex; justify-content: center; align-items: center; height: 100vh; border: 1px solid black;">
  <div style="width: 100px; height: 100px; background-color: lightblue;">
    Centered Div
  </div>
</div>

Explanation:

• display: flex;: Makes the container a flexbox.
• justify-content: center;: Horizontally centers the child.
• align-items: center;: Vertically centers the child.
• height: 100vh;: Makes the parent <div> fill the full viewport height.

---

2. Using CSS Grid

CSS Grid is another modern and powerful layout method.

<div style="display: grid; place-items: center; height: 100vh; border: 1px solid black;">
  <div style="width: 100px; height: 100px; background-color: lightblue;">
    Centered Div
  </div>
</div>

Explanation:

• display: grid;: Turns the container into a grid.
• place-items: center;: Centers the child both horizontally and vertically.

---

3. Using Positioning (For Compatibility)

This approach works on older browsers.

<div style="position: relative; height: 100vh; border: 1px solid black;">
  <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; background-color: lightblue;">
    Centered Div
  </div>
</div>

Explanation:

• position: relative;: Ensures the parent acts as the reference point.
• position: absolute;: Positions the child relative to the parent.
• top: 50%; left: 50%;: Moves the child to the center.
• transform: translate(-50%, -50%);: Corrects the offset caused by top and left values.

---

4. Using Margin Auto (Horizontal Centering Only)

If you only need horizontal centering:

<div style="text-align: center; border: 1px solid black;">
  <div style="margin: 0 auto; width: 100px; height: 100px; background-color: lightblue;">
    Centered Div
  </div>
</div>

Explanation:

• margin: 0 auto;: Centers the child horizontally if it has a defined width.

---

For most use cases, Flexbox or CSS Grid are preferred due to simplicity and modern browser support. Use positioning if you're working with older browsers.