![]() See the Pen Grid center content using Tailwind CSS by Chris Bongers ( CodePen. This code will perfectly center the element horizontally and vertically on the page. h-screen: Sets the 100vh (screen-height) as the height.place-items-center: Gives it the center value on the place-items property.grid: Gives the element a display: grid css property.Centered using Tailwind GridĬan you believe this code is all we need? We'll start by using grid center to make a div element horizontally and vertically centered on a page. Generally, css grid should be used for the high-level layout and flexbox CSS for details.įor our demo, we'll use the same CSS structure so you can see the difference in both examples better. There isn't a clear wrong or right choice between these two methods. We'll be looking at two methods of centering a div with Tailwind. Nowadays, I choose Tailwind CSS as my goto CSS framework.Īnd today, I'll show you how to center elements with Tailwind CSS quickly. Using Tailwind CSS to center a div element vertical & horizontal with flexbox or CSS grid allignment. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |