 |
Centering a div is one of the most common needs in front-end development. In this article, we explore 6 different techniques to achieve horizontal, vertical, or both centering. Each technique is accompanied by a short description, HTML example and CSS code.
✅ 1. Center horizontally with margin: auto
The easiest way to center a fixed-width element is to use margin: 0 auto;.
<div class="center-horizontal">Content</div>.center-horizontal {
width: 200px;
margin: 0 auto;
}⚠️ Only works for horizontal centering, and requires the element to have a defined width.
✅ 2. Centering with Flexbox
Flexbox is modern, powerful, and allows horizontal and vertical centering with just a few lines of code.
<div class="flex-container">
<div>Content</div>
</div>.flex-container {
display: flex;
justify-content: center;
align-items: center;
}📌 Ideal for responsive layouts. Works perfectly on all modern browsers.
✅ 3. Centering with Grid
With CSS Grid you can center an element in both directions in an elegant and readable way.
<div class="grid-container">
<div class="centered">Content</div>
</div>.grid-container {
display: grid;
place-items: center;
}📌 Great for modern layouts. Extremely readable and compact.
✅ 4. Centering with position and transform
A classic technique: absolute positioning and transformation with translate to center on both axes.
<div class="absolute-container">
<div class="centered">Contents</div>
</div>.absolute-container {
position: relative;
height: 100vh;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}📌 Compatible with older browsers, also useful for popups or modals.
✅ 5. Center vertically with line-height
Perfect for single-line text: set line-height equal to the height of the container.
<div class="line-height-center">Text centered</div>.line-height-center {
height: 200px;
line-height: 200px;
text-align: center;
}⚠️ This only works if the content is a line of text. Not suitable for multiple items or images.
✅ 6. Center with display: table-cell
An "old school" method but still valid, especially for extended compatibility.
<div class="table-container">
<div class="table-cell">
<div class="centered">Contents</div>
</div>
</div>.table-container {
display: table;
height: 100vh;
width: 100%;
}
.table-cell {
display: table-cell;
vertical-align: middle;
text-align: center;
}📌 Compatible with older browsers and perfect for legacy layouts or HTML emails.
📊 Technique Comparison
| Technical | Support | Complexity | Modernity |
|---|---|---|---|
margin: auto | ✅✅✅✅ | ⭐ | ⭐⭐ |
| Flexbox | ✅✅✅ | ⭐⭐ | ⭐⭐⭐⭐⭐ |
| CSS Grid | ✅✅✅ | ⭐⭐ | ⭐⭐⭐⭐⭐ |
position + transform | ✅✅✅ | ⭐⭐ | ⭐⭐⭐⭐ |
line-height | ✅✅✅✅ | ⭐ | ⭐ |
display: table-cell | ✅✅✅✅✅ | ⭐⭐ | ⭐ |
🔚 Conclusion
Each technique has its pros and cons. Today, Flexbox and Grid are preferred for simplicity and power, but knowing the other options also ensures greater flexibility and compatibility in your HTML/CSS projects.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
