How to Center Text Vertically and Horizontally with CSS
In this video, I’ll show you how to center text vertically and horizontally in CSS. We will look into three methods to achieve this using CSS Flexbox Layout (Flexible Box) and CSS Grid Layout. Also, in the end, I will show you the easiest way to center text vertically and horizontally. Enjoy!
If you have any suggestions for future videos, please leave them in the comments below.
⏱️ TIMESTAMPS
0:00 - Introduction
0:10 - Three Test Cases
1:22 - Using CSS Flexbox
5:17 - Using CSS Grid Layout (Method #1)
7:02 - Using CSS Grid Layout (Method #2) - Easiest way
7:57 - Conclusion
➜ OTHER HELPFUL VIDEOS
Top 5 VS Code Extensions for CSS - • Top 5 VS Code Extensions for CSS | Vi...
HTML Tricks (Part 1) - • HTML Tricks I Bet You Didn't Know (Pa...
HTML Tricks (Part 2) - • HTML Tricks I Bet You Didn't Know (Pa...
Mind-Blowing CSS Tips and Tricks - • Mind-Blowing CSS Tips and Tricks You ...
HTML Tips and Tricks (Part 3) - • HTML Tips and Tricks (Part 3): Add Ph...
🎬 Video Files
Demo - https://codewithpalash.github.io/css-...
Code - https://github.com/codewithpalash/css...
💻 CodePen Demos Collection
https://codepen.io/collection/yrybOY
🔔 Subscribe for more tips just like this
https://www.youtube.com/codewithpalas...
📝 Helpful Links
Firefox DevTools CSS Flexbox Inspector - https://developer.mozilla.org/en-US/d...
Firefox DevTools CSS Grid Inspector - https://developer.mozilla.org/en-US/d...
MDN Why Flexbox - https://developer.mozilla.org/en-US/d...
MDN What is Grid layout - https://developer.mozilla.org/en-US/d...
💬 Social Links:
Twitter - / codewithpalash
GitHub - https://github.com/codewithpalash
Facebook - / codewithpalash
Tags:
css, text alignment, center text, vertical centering, horizontal centering, web design, frontend development, user interface, user experience, responsive design, web layout, cascading style sheets, web development tutorial, web development tips, html, coding tutorial, css tricks, css flexbox, css grid, box model
#css #html #webdevelopment
Disclaimer:
The videos on this channel are intended for educational purposes only. Please use the information provided in the videos wisely and conduct your own research before making any decisions. While every effort has been made to ensure the accuracy of the information presented, there may be slight errors or omissions. This video is not intended to force any particular point of view or opinion on the viewer.
