How to align center vertically using Tailwind

I always tend to forget how to align center vertically using Flexbox.

You need a container with those CSS instructions:
display: flex;
align-items: center;
justify-content: center;
In Tailwind, this translates to the classes flex items-center…


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

I always tend to forget how to align center vertically using Flexbox.

You need a container with those CSS instructions:

display: flex;
align-items: center;
justify-content: center;

In Tailwind, this translates to the classes flex items-center justify-center.

Example:

<div class='flex items-center justify-center'>
  <button>Add</button>
</div>


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2021-05-06T05:00:00+00:00) How to align center vertically using Tailwind. Retrieved from https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/

MLA
" » How to align center vertically using Tailwind." flaviocopes.com | Sciencx - Thursday May 6, 2021, https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/
HARVARD
flaviocopes.com | Sciencx Thursday May 6, 2021 » How to align center vertically using Tailwind., viewed ,<https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/>
VANCOUVER
flaviocopes.com | Sciencx - » How to align center vertically using Tailwind. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/
CHICAGO
" » How to align center vertically using Tailwind." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/
IEEE
" » How to align center vertically using Tailwind." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/. [Accessed: ]
rf:citation
» How to align center vertically using Tailwind | flaviocopes.com | Sciencx | https://www.scien.cx/2021/05/06/how-to-align-center-vertically-using-tailwind/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts