How to Center a Div in CSS
What You’ll Build or Solve
You’ll center a div inside its parent using four common techniques. By the end, you’ll know which method to choose for your layout and how to get consistent results on different screen sizes.
When This Approach Works Best
This approach works best when you:
Learn CSS on Mimo
- Build landing pages with centered cards or forms
- Create modals or loading screens that must sit in the middle
- Align content inside hero sections
Avoid these layout techniques when you only need to center inline text. For text inside a block, text-align: center is usually enough.
Prerequisites
- A basic HTML file
- A linked CSS file or a
<style>block - Familiarity with CSS selectors
Example HTML structure used below:
<divclass="parent">
<divclass="child">Center me</div>
</div>
Step-by-Step Instructions
Step 1: Center Horizontally with margin: auto
Use this method when you only need horizontal centering.
CSS
.child {
width:150px;
margin:0auto;
}
This works because a block element with a defined width can split the remaining horizontal space evenly on the left and right.
Use this when:
- The element has a fixed or max width
- You only care about horizontal centering
Step 2: Center Horizontally and Vertically with Flexbox
Flexbox is the most common and flexible method for centering.
CSS
.parent {
display:flex;
justify-content:center;
align-items:center;
height:300px;
}
justify-content: center;centers horizontallyalign-items: center;centers vertically
For full-page centering, use viewport height:
CSS
.parent {
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
This is ideal for login screens, hero sections, and centered cards.
Step 3: Center with CSS Grid
Grid can center a div with very little code.
CSS
.parent {
display:grid;
place-items:center;
height:300px;
}
place-items: center; centers both horizontally and vertically.
This method is clean and concise when you only need one centered child.
Step 4: Center with Absolute Positioning
Use this when you need an overlay, such as a modal.
CSS
.parent {
position:relative;
height:300px;
}
.child {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
This moves the element’s top-left corner to the center, then shifts it back by half its own width and height.
Use this for:
- Modals
- Popups
- Overlays
Examples You Can Copy
Example 1: Center a Card in a Section
<sectionclass="wrapper">
<divclass="card">Welcome</div>
</section>
CSS
.wrapper {
display:flex;
justify-content:center;
align-items:center;
height:400px;
background: #eee;
}
.card {
padding:2rem;
background:white;
border-radius:8px;
}
Example 2: Center a Login Form on the Page
CSS
<body>
<divclass="login-box">
<h2>Login</h2>
</div>
</body>
CSS
body {
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.login-box {
padding:2rem;
background:white;
box-shadow:04px10pxrgba(0,0,0,0.1);
}
Example 3: Center Inside a Grid Layout
<divclass="container">
<divclass="box">Centered</div>
</div>
CSS
.container {
display:grid;
place-items:center;
height:300px;
}
.box {
width:120px;
height:120px;
background:coral;
}
Common Mistakes and How to Fix Them
Mistake 1: Using margin: auto Without Setting Width
What you might do:
CSS
.child {
margin:0auto;
}
Why it breaks: Block elements usually stretch to full width, so there is no extra space to distribute.
Correct approach:
CSS
.child {
width:200px;
margin:0auto;
}
Mistake 2: Forgetting Parent Height for Vertical Centering
What you might do:
CSS
.parent {
display:flex;
justify-content:center;
align-items:center;
}
Why it breaks: If the parent has no height, vertical centering has no visible effect.
Correct approach:
CSS
.parent {
display:flex;
justify-content:center;
align-items:center;
height:300px;
}
For full-screen layouts:
CSS
.parent {
height:100vh;
}
Troubleshooting
If vertical centering does nothing, set a height on the parent such as 300px or 100vh.
If the div still sits at the top-left, confirm display: flex or display: grid is applied to the parent, not the child.
If margin: 0 auto does nothing, set a width on the element you are centering.
If your centered element jumps unexpectedly, check for conflicting rules like position: absolute, float, or a parent with display: inline.
If nothing applies, confirm your CSS file is linked, and class names match your HTML.
Quick Recap
- Use
margin: 0 auto;for horizontal centering with a defined width - Use Flexbox to center in both directions inside a container
- Use Grid with
place-items: center;for a concise centering setup - Use absolute positioning for overlays and special cases
- Set a height on the parent to make vertical centering visible
Join 35M+ people learning for free on Mimo
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot