m-auto, mx-auto, my-auto, ml-auto… — auto margins absorb free space in block and flex/grid layouts. This family contains 7 generated classes in Nakshora 3.1.

Classes#

ClassGenerated CSS
m-automargin: auto;
mx-automargin-left: auto; margin-right: auto;
my-automargin-top: auto; margin-bottom: auto;
mt-automargin-top: auto;
mr-automargin-right: auto;
mb-automargin-bottom: auto;
ml-automargin-left: auto;

Example#

example
html
<div class="flex h-screen">
  <div class="m-auto">Perfectly centered</div>
</div>

Responsive & variants#

Every class here accepts screen prefixes (xxs: … 5xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.

Best practices#

  • m-auto inside flex centers on BOTH axes — no justify/align needed
  • ml-auto/mt-auto push siblings away (spacer pattern)

utilities/spacing/spacing-scale|Spacing scale · utilities/sizing/width|Width · comparisons/margin-vs-padding|Margin vs padding