Center a Div
Flexbox ka use karke child box ko horizontal aur vertical dono direction me center karo.
Working code
<div class="container">
<div class="box">Centered</div>
</div>
<style>
.container {
min-height: 240px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 24px;
background: white;
border-radius: 12px;
}
</style>Preview
Centered
How it works
display: flex container ko flex formatting context deta hai.
justify-content: center main axis aur align-items: center cross axis par child ko center karte hain.
Try Yourself
<div class="container">
<div class="box">Centered</div>
</div>
<style>
.container {
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.box {
padding: 32px;
border: 2px solid #222;
}
</style>