How to center a div? How to do this centering thing that even the best software developers can’t do and search for on Google? In this article, we will see 5 different ways to center a div. You can also use these methods to center other elements.
1. Centering with Flexbox
Flexbox is a modern way to center content both vertically and horizontally:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="container">
<div class="centered-div">Teknokodi</div>
</div>
2. Centering with Grid
With CSS Grid you can also center content:
.container {
display: grid;
place-items: center;
height: 100vh;
}
<div class="container">
<div class="centered-div">Teknokodit</div>
</div>
3. Centering with Absolute Positioning
You can center a div using absolute positioning:
.container {
position: relative;
height: 100vh;
}
.centered-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="centered-div">Teknokodit</div>
</div>
4. Centering with Margin Auto
For simple horizontal centering, margin auto can be used:
.centered-div {
width: 50%;
margin: 0 auto;
}
<div class="centered-div">Teknokodi</div>
5. Centering with Inline-block display
Centering with inline and inline-block:
.container {
text-align: center;
line-height: 100vh;
}
.centered-div {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div class="container">
<div class="centered-div">Teknokodit</div>
</div>
In this article, we saw how to center a div. With these methods, you can center a div or another element.
Share
Follow
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
