Search code examples
materialize

How do I center an element on large display using materialize?

I am using Materialize CSS and I'm trying to center a div. I'm trying to get the white boxes to center on mobile and desktop to the center of the page. All the white boxes are in the same div called root.

index.html

 <body>
    <div class="container">

       <div id="mainContent" class="row">

          <div id="root" class="col s12 xl l6"></div>

       </div>
    </div>
 </body>

styles.css

#mainContent {
    background-color: blue;
    margin: auto;
    display: block;
}

#root {
    margin: 0 auto;
    position: relative;
}

On mobile, it centers the white boxes correctly. On mobile, it centers the white boxes correctly.

On desktop the boxes are on the left side. Desktop view

If I add margin-left to .root{} then it's not centered on the mobile version.

Solution

  • I added a wrapper to index.html like so

    <div id="mainContent" class="row">
    <div class="valign-wrapper">
        <div id="root" class="col s12 xl l6"></div>
    </div>
</div>

    Now the white boxes are centered in the middle on both smaller resoultion displays and bigger.