I have been doing web development for a number of years and always battled to center my content vertically. Now, with Materialize, it’s a breeze.

Here is how to do it.

What Is Materialize?

Materialize is a front-end framework based on Google’s Material Design. Material Design is a design language that combines the classic principles of design along with an easy-to-use framework.

Materialize uses Flexbox, which according to the Mozilla Developer Network is a layout mode for the arrangement of elements on a page. It helps to make complex layouts with simpler and cleaner code.

How Does It Work?

Materialize has a class called valign-wrapper that can center content or send it to the bottom. Each browser interprets CSS in a different way, so you need to adjust this function for each.

Let’s look at how Materialize uses the vertical align class in CSS,

.valign-wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;

It seems that the content is being centered three times. This is because it is using a different class for each browser. Materialize achieves this using something called a prefix. Prefixes are used to add new CSS features to a site while still having the browsers support those styles.

Going back to the example, we can see that there are two prefixes being used: the WebKit and the MS prefix. The WebKit prefix is used for Chrome, the Android browser, Safari, and some versions of Opera. The MS prefix is used only for Internet Explorer.

If you are going to use an old version of Opera you only need to add a class with the prefix -o- or if you are planning to use Firefox you use -moz-.

Note that the third class, align-items doesn’t have a prefix. Some browsers don’t need a prefix to use the class. The browser does the interpretation of the CSS depending on which class is in and automatically aligns the content vertically.

Finally …

Materialize gives you everything so you need to vertically align your content in almost every browser.

I hope you liked this post. If you have any question or comment please sent me an email to [email protected].