Primer CSS Margin Center elements

Primer CSS is a free and open-source CSS framework that is built using the GitHub design system for providing support to the broad spectrum of GitHub websites. It helps in creating the foundation of the basic style elements such as spacing, components, typography, color, etc. 

In this article, we'll see about Primer CSS Margin Center elements. Margin center elements utilities are used to center block elements with equal margins on all sides of the element.

Primer CSS Margin Center elements classes:

• mx-auto: This class is used to center block elements with a set width.
• mt-auto: This class is used to provide a directional margin of the top.
• mb-auto: This class is used to provide a directional margin of the bottom.
• ml-auto: This class is used to provide a directional margin on the left.
• mr-auto: This class is used to provide a directional margin on the right.

Syntax:

<div class="color-bg-success">
 <div class="mx-auto color-bg-subtle text-center" 
 style="max-width: 500px;">.mx-auto text</div>
</div>

Example 1: Below example demonstrates margin center elements.

Output:

Example 2: Below example demonstrates all directional auto margins in center elements.

Output:

Reference: https://primer.style/product/css-utilities/#center-elements