This content originally appeared on DEV Community and was authored by CodeOz
3 ways to center a div in HTML/CSS!!
With Position
/* Using positions */
.parent {
position: relative;
}
.child {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
<div
class="parent"
style="background: blue; width: 500px; height: 250px;"
>
<div
class="child"
style="color: white;"
>
I'm center
</div>
</div>
With Flexbox
/* Using flexbox */
.container-flexbox {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
<div
class="container-flexbox"
style="background: green; width: 500px; height: 250px;"
>
<div
style="color: white;"
>
I'm center
</div>
</div>
With Grid
/* Using Grid */
.container-grid {
display: grid;
place-content: center;
}
<div
class="container-flexbox"
style="background: orange; width: 500px; height: 250px;"
>
<div
style="color: white;"
>
I'm center
</div>
</div>
I hope you like this reading!
🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and send message to me 😁 and SAVE 19$ 💵💵
Or get it HERE
🇫🇷🥖 For french developper you can check my YoutubeChannel
☕️ You can SUPPORT MY WORKS 🙏
🏃♂️ You can follow me on 👇
🕊 Twitter : https://twitter.com/code__oz
👨💻 Github: https://github.com/Code-Oz
And you can mark 🔖 this article!
This content originally appeared on DEV Community and was authored by CodeOz
CodeOz | Sciencx (2021-11-24T15:11:19+00:00) 3 Ways to CENTER a div in CSS. Retrieved from https://www.scien.cx/2021/11/24/3-ways-to-center-a-div-in-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.