CSS Tutorial
CSS Align
Center with margin auto, text-align, flex, or grid. Pick the method that matches the box type.
Match the method to the box
Centering is not one property. A block with a known width uses margin: auto. Inline text uses text-align. A row of cards uses flex or grid. Harbor studio pages mix all three: a capped article in the middle, a heading centered in a banner, a berth row centered on both axes.
If a trick “does nothing,” you probably applied a text method to a block, or a block method to a box that still stretches to full width.
margin: auto on a block
Horizontal auto margins split leftover space left and right. The box must be a block (orflex/grid item you are not stretching), and it must be narrower than its parent. width or max-width is what creates that leftover space.
Example
<style>
.studio {
width: 16rem;
margin: 0 auto;
padding: 1rem;
background: #e0f2fe;
border: 2px solid teal;
color: #0f766e;
}
</style>
<article class="studio">
<p>Harbor studio sits in the middle of this row. Hours 8–16.</p>
</article>margin: 0 auto does not center a box vertically in the viewport. For that, use a flex or grid parent that is as tall as the space you care about.
text-align for inline content
text-align: center on a block centers the inline and inline-block children inside it — words, links, chips. It does not shrink or center a full-width block child.
Example
<style>
.banner {
text-align: center;
padding: 1rem;
background: teal;
color: white;
}
.banner p {
margin: 0.35rem 0 0;
color: #ccfbf1;
}
</style>
<header class="banner">
Harbor studio
<p>North quay — sky gallery — open 8–16</p>
</header>Putting text-align: center on body centers every heading and paragraph. Prefer it on the banner or the button row you actually want centered.
Flex center — one or both axes
A flex container can center children on the main axis with justify-content: center and on the cross axis with align-items: center. Together they put a chip in the middle of a frame. Grid uses place-items: center for the same idea.
Example
<style>
.frame {
display: flex;
justify-content: center;
align-items: center;
height: 8rem;
background: #e0f2fe;
border: 2px solid teal;
}
.chip {
background: teal;
color: white;
padding: 0.6rem 1rem;
}
</style>
<div class="frame">
<span class="chip">Slip 4 — Harbor studio</span>
</div>In /css/try, remove align-items and watch the chip jump to the top. Then set flex-direction: column — justify-content now runs vertically.
Which tool?
| You have | You want | Use |
|---|---|---|
| A block narrower than its parent | Horizontal center | margin: 0 auto |
| Words, links, inline-block chips | Centered line | text-align: center |
| One or more flex children | Center on one or both axes | justify-content and align-items |
| A grid cell or grid container | Center in the area | place-items or place-self |
Related: Max Width so a centered column has a cap,Inline-block for chips inside a text-align row, andFlexbox for the full justify and align set.
Worked examples
The short listings above show one property. These sheets paint documents you would actually ship: a lab dashboard, a clinic form, a marks table, a nav bar.
CSS does not invent meaning. HTML already said what the pieces are. Cascade, specificity, and the box model decide how they look. The numbers are classroom values — current, pH, pulse, 3-4-5 — so the style has something real to sit on.
Preview them in the CSS editor at /css/try. Change one property and watch the page paint. The tags stay the same.
Astronomy
Centre a fact block
A block with a width centres with margin-left/right auto. text-align:center centres the text inside. Flex/grid place-items is the two-axis version.
Pick the method that matches the box. Centring a full-width block with text-align does not shrink it.
Example
<style>
.box { width: 160px; margin-left: auto; margin-right: auto; background: #ede9fe; padding: 0.5rem; }
</style>
<div class="box">687 Earth days</div>Biology
A hero that centres the clinic name
text-align on the wrapper centres headings and buttons together. That is a poster. A form still wants labels left-aligned so columns line up.
Example
<style>
.hero { text-align: center; background: #fef3c7; padding: 0.8rem; }
</style>
<div class="hero"><h2>Riverside</h2><p>Walk-in 08:00–16:00</p></div>