Centering a Div in HTML: A Quick Guide

Kung nag-front-end ka na kahit minsan, siguradong naranasan mo na ’to —
i-center lang yung div, pero biglang napupunta ka na sa Google, Stack Overflow, at kung saan-saan 😅

Mukhang simple lang siya, pero depende sa layout, may ilang ways para gawin ito.
Sa guide na ’to, makikita mo ang tatlong common at reliable ways para i-center ang div sa HTML, plus examples using TailwindCSS.

1. Using Transformh2

Isa sa pinaka-straightforward na approach ay gamit ang transform.

HTMLh3

<div class="center-transform">
  <!-- Copy-paste mo lang dito yung content -->
</div>

CSSh3

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

Explanation:

• position: absolute → positioning relative sa parent
• top / left 50% → inilalapit sa gitna
• translate(-50%, -50%) → fine-tuning para exact center

More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

2. Using Flexboxh2

Kung modern layout ang ginagawa mo, Flexbox ang madalas pinaka-practical.

HTMLh3

<div class="center-flexbox">
  <!-- Content here -->
</div>

CSSh3

.center-flexbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

• justify-content: center → horizontal center
• align-items: center → vertical center

More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox

3. Using Gridh2

CSS Grid offers the cleanest syntax kung centering lang ang goal.

HTMLh3

<div class="center-grid">
  <!-- Content here -->
</div>

CSSh3

.center-grid {
  display: grid;
  place-items: center;
  height: 100vh;
}

Isang line lang (place-items: center) para sa both horizontal at vertical centering.

More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

Tailwind CSS Examplesh2

Kung TailwindCSS ang gamit mo, mas simple pa.

Flexbox (Tailwind)h3

<div class="flex items-center justify-center h-screen">
  <!-- Content here -->
</div>

• flex → flex container
• items-center → vertical center
• justify-center → horizontal center
• h-screen → full screen height

Grid (Tailwind)h3

<div class="grid place-items-center h-screen">
  <!-- Content here -->
</div>

Equivalent ng CSS Grid approach pero mas concise.

Final Thoughtsh2

Centering a div in HTML doesn’t need to be complicated.
Once alam mo na kung alin ang bagay sa layout mo—Flexbox, Grid, or Transform—madali na lang siya.

If napa-search ka ulit ng “how to center a div”, bookmark mo na ’to.
Makakatipid ka ng oras next time 😄