Center Horizontal and Vertical - Tailwind CSS Plugin

Center horizontal and vertical absolute positioned elements in a div at your Tailwind CSS project.

Installation

Pull it in through npm or yarn:

npm install tailwindcss-absolute-center

yarn add tailwindcss-absolute-center

Usage

Add Tailwind CSS to your project as described here. Install tailwindcss plugin as described above and add it to your tailwind.config.js file.

plugins: [
  // Other plugins
  require('tailwindcss-absolute-center')(
    {
        variants: ['responsive'],
    },
  ),
]

Available Animate CSS classes

• .center-y
• .center-x

Usage

Just at .center-x to horizontal or .center-y to vertical center your absolute element in a relative div.

<div class="relative w-20 h-20">
    <div class="absolute center-x center-y w-8 h-8 bg-gray-300"></div>
</div>

More Tailwind CSS Plugins

tailwindcss-animate.css

License

This project is licensed under the MIT License.