An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
Some of Our Sources
- Engadget
- Mashable
- Technology Review
- Simplebits
- Team Treehouse
- Pearsonified
- Spoon Graphics
- Six Revisions
- Abduzeedo
- Fudge Graphics
Help Webnuz
Referal links:
March 8, 2020 08:32 am GMT
Original Link: https://dev.to/mindset/how-to-center-things-in-css-2obo
How to center things in CSS
Yo devs !
A quick guide on "How to center things in CSS"
Most of the time, you write great CSS code from colors to complex animations.
But I know most of us (beginners) still struggle to center elements on a viewport perfectly.
Don't worry devs, you are no longer be an noob at the end of this short guide.
Let's get started
There are two ways to center any HTML element on a web page :
1. Using Flexbox
2. Using Transform
- Using Flexbox
HTML code as shown below
<body> <div class="container"> <div id="object"></div> </div> </body>Now the CSS code
html,body,.container { height: 100%; overflow: hidden;}.container { display: flex; justify-content: center;}#object { height: 100px; width: 100px; background: red; align-self: center;}- Using Transform
HTML code shown below
<body> <div class="element"></div></body>Now the CSS code
.element { width: 100px; height: 100px; background: coral; }.element { position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); }Author: Jayesh
Original Link: https://dev.to/mindset/how-to-center-things-in-css-2obo
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