Primer CSS Margin Center elements

Last Updated : 16 May, 2022

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.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" 
        content="width=device-width, initial-scale=1.0" /> 
    <title>Primer</title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
        rel="stylesheet"/> 
</head> 
<body> 
    <div class="m-4"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h2>Primer CSS Margin Center Elements</h2> 
    </div> 
    <div class="color-bg-success"> 
        <div class="mx-auto color-bg-success-emphasis  
                    text-center color-fg-on-emphasis"  
            style="max-width: 500px;"> 
            Welcome to GeeksforGeeks 
        </div> 
    </div> 
</body> 
</html>

Output:

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <div class="m-4"> 
        <h1 style="color: green;"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>Primer CSS Margin Center Elements</h2> 
    </div> 
  
    <div class="d-flex border mb-4 color-bg-success"> 
        <div style="height:100px;"></div> 
        <div class="border mt-auto color-bg-success-emphasis  
            color-fg-on-emphasis">Box at the bottom.</div> 
        <div class="border mb-auto color-bg-success-emphasis  
            color-fg-on-emphasis">Box at the top.</div> 
    </div> 
    <div class="d-flex flex-column border color-bg-success"> 
        <div class="border ml-auto color-bg-success-emphasis  
            color-fg-on-emphasis">Box in the right.</div> 
        <div class="border mr-auto color-bg-success-emphasis  
            color-fg-on-emphasis">Box in the left.</div> 
    </div> 
</body> 
  
</html> 