An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- Slashdot
- Just Creative
- Vandelay Design
- You The Designer
- Naldz Graphics
- My Ink Blog
- Web Design Ledger
- Stylized Web
- Spyre Studios
- Design Modo
Help Webnuz
Referal links:
November 24, 2021 03:11 pm GMT
Original Link: https://dev.to/codeoz/3-ways-to-center-a-div-in-css-gl1
3 Ways to CENTER a div in CSS
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!
Original Link: https://dev.to/codeoz/3-ways-to-center-a-div-in-css-gl1
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To