“I just want to place it in the center, but it won’t go there”: this is the most-searched CSS problem. This article gathers 10 standard layouts you use every time, with live demos, from centering to horizontal rows to card grids to a whole page’s skeleton. Copy-paste and just match the numbers to your page.
CSSLine things up with FlexboxWant to know “why this lines up” from how it works? Head to the Flexbox lesson in the CSS course.Centering: start here
Text in the center
If you just want to center the text inside a heading or button, this is all it takes.
.box {
text-align: center;
}A box in the horizontal center
To place the box itself in the center, set a width and use margin: auto. The condition is that the width is set. auto means “take on all the leftover space,” and setting both left and right to auto splits the space in half, settling the box in the center.
.card {
width: 300px;
margin-left: auto;
margin-right: auto;
}In the dead center
For “center both vertically and horizontally,” the definitive approach today is three lines of flex on the parent. When in doubt, use this.
.center {
display: flex;
justify-content: center; /* horizontal center */
align-items: center; /* vertical center */
height: 300px; /* the parent needs a height */
}Overlaid on something and centered
Placing a badge on a photo, overlaying a heading on an image: for “overlaid and centered” specifically, it’s position’s job, not flex.
.photo {
position: relative; /* becomes the reference point for overlaying */
}
.badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}The key is the last transform. With just top: 50% and left: 50%, the child’s top-left corner comes to the parent’s center, so it looks shifted to the lower right. That’s where translate(-50%, -50%) comes in: this -50% refers to half of the child’s own width and height, so now the center, not the corner, lines up with the parent’s center.
If you don’t need to overlay, the earlier three lines of flex are shorter and more reliable.
Lining up horizontally
Evenly spaced in a row
Line up buttons or icons with even gaps. Manage the gaps in one place with gap.
.row {
display: flex;
gap: 12px;
}Split to both ends
Logo on the left, menu on the right: the header classic is space-between.
.header {
display: flex;
justify-content: space-between; /* split to both ends */
align-items: center; /* vertically align to center */
}With two children, one goes to each side; with three, the middle is placed at even spacing too. When you want “keep them left-aligned, but push only the last one to the right,” the standard is not space-between but adding margin-left: auto to the child you want on the right.
Image and text in a row
A classic for profiles and announcements. The image is a fixed width, and the text is all the rest (flex: 1).
.media {
display: flex;
gap: 16px;
align-items: center;
}
.media-icon { flex-shrink: 0; } /* don't let the image side shrink */
.media-body { flex: 1; } /* the text side uses the rest */Cards that wrap and line up automatically
Using Grid’s auto-fit, you can make a card grid where the number of columns changes on its own to match the screen width in one line. A killer move that needs no media queries.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}Read it as “make as many columns of at least 140px as fit, and spread them evenly.” 140px is the card’s minimum width. If you want bigger cards, just raise the number, like 200px, and the column count is calculated automatically from the screen width.
Whole-page templates
Content in a centered band
So the text doesn’t sprawl across the whole screen, keep it within a readable-width band. This is a template used on almost every site.
.container {
max-width: 800px; /* won't spread wider than this */
margin-left: auto; /* center the whole band left-right */
margin-right: auto;
padding: 0 16px; /* side margins on a narrow screen */
}Just wrap what’s directly under <body> in <div class="container">. Since it’s max-width, not width, it shrinks to fit on a phone.
Sticking the footer at the very bottom
So the footer doesn’t float up on a page with little content, make the whole page a vertical flex.
.page {
display: flex;
flex-direction: column;
min-height: 100vh; /* at least the screen height */
}
.main { flex: 1; } /* the content uses all the leftover height */Checklist for when you can’t center
When copy-pasting doesn’t work, it’s usually one of these.
text-align: centerdoesn’t work → Isn’t that a block (a box)? Center the box itself withmargin: autoor the parent’s flexmargin: autodoesn’t work → Did you set a width? It won’t move withoutwidth(ormax-width)- Vertical centering doesn’t work → Does the parent have a height? (See the stumble point above)
- Width and height don’t work on
<span>or<a>→ They’re inline elements. Change todisplay: inline-blockordisplay: block gapdoesn’t work →gapis a property you write on the parent (the flex or grid container). Aren’t you writing it on the child?- The image stretched vertically after going flex → The default
stretchvalue ofalign-itemsis the cause. Writealign-items: centeron the parent, or addalign-self: centeron the image side
Summary
- The definitive centering is three lines of flex on the parent (justify-content + align-items + height)
- Horizontal rows are
display: flex+gap, the header isspace-between, and card grids are Grid’sauto-fit - When it doesn’t work, suspect in this order: “is there a width, does the parent have a height, is it not inline?”
Keep these 10 at hand and you’ll spend far less time stuck on layout.