absolute-center Utility Class for Centering Absolute Elements

[alwalxed]

As the title suggests, I propose the addition of the absolute-center utility class for centrally positioning absolute elements. Countless times have I manually written this, indicating its common necessity

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

[1mehdifaraji]

I had the same issue and sadly there is no absolute-center class name so I made my own custom tailwindcss class name in global.css file like this :

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .absolute-center {
     @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2
  }
}

[ahmedrowaihi]

in your tailwind.config include it as utility
for example:

    plugin(({ addUtilities }) => {
      addUtilities({
        ".lx-center": { left: "50%", transform: "translateX(-50%)" },
        ".ly-center": { top: "50%", transform: "translateY(-50%)" },
        ".lxy-center": {
          top: "50%",
          left: "50%",
          transform: "translate(-50%, -50%)",
        },
      });
    }),

and use classes, lx-center ly-center lxy-center