Creating tiles with CSS I am still a beginner in CSS and am trying to make a tiles/cards design. I have reached this code, and I want to know if my layout this way is good or if there are any improvements I need to make.

Is writing margin and padding auto is the right practice? How about using flexbox as am doing?



html{
  font-size: 12px;
  font-family: Arial, sans-serif;
}

body{
  margin: auto;
  padding: auto;
  /* What's the best practice to align content in the middle */
}

h1{
  background-color: red;
  text-align: center;
  height: 50px;
  vertical-align: /*What to put here to make it centered? */  ;
}

.flex{
  display: flex;
}

.item{
  width: 30%;
}
.item  h3{
    color: grey;
  }

  
   .item span{
    font-style: italic;
  }
&lt;!DOCTYPE html&gt;
&lt;html&gt;

  &lt;head&gt;
    
    &lt;link rel="stylesheet/less" href="style.less" /&gt;
    &lt;script  src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;h1&gt;Hello Plunker!&lt;/h1&gt;
    &lt;div class="flex"&gt;
      &lt;div class="item red"&gt;
        &lt;h3&gt;
        Project 1
        &lt;/h3&gt;
        &lt;span&gt;Time: 10:30AM&lt;/span&gt;
        &lt;/div&gt;
      &lt;div class="item green"&gt;
        &lt;h3&gt;
        Project 2
        &lt;/h3&gt;
        &lt;span&gt;Time: 10:30AM&lt;/span&gt;
        &lt;/div&gt;
      &lt;div class="item blue"&gt;
        &lt;h3&gt;
        Project 3
        &lt;/h3&gt;
        &lt;span&gt;Time: 10:30AM&lt;/span&gt;
        &lt;/div&gt;
      &lt;div class="item yellow"&gt;
        &lt;h3&gt;
        Project 4
        &lt;/h3&gt;
        &lt;span&gt;Time: 10:30AM&lt;/span&gt;
        &lt;/div&gt;
      &lt;div class="item navy"&gt;
        &lt;h3&gt;
        Project 5
        &lt;/h3&gt;
        &lt;span&gt;Time: 10:30AM&lt;/span&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;

&lt;/html&gt;
I'm going to have to heavily disagree with Tolani Jaiye-Tikolo's answer. Using ID's isn't good CSS authoring generally (however this rule can be broken, like all rules.) This is because you create overly specific CSS that can only be used once.

Another point i'd like to make about their feedback: please only use tables for tabular data. Using them as structural elements is not the way to go. If you want to use the properties of a table element, use display: table;.

That said, onto some critique of your code. You asked what the best way to center align content is. There's several methods for achieving this, some very common ways are:


use text-align: center; on a parent container. This only affects inline or inline-block elements.
use margin: 0 auto; on a element. This only works on block type elements.


I noticed you're also looking to vertically align an element. This is a little more complex than horizontally aligning an element (But only slightly). I personally use the following two methods often:


Place display: table; on the parent/container element. Place display: table-cell; and vertical-align: middle; on the child element (the one you want to vertically center). The child element should sit in the middle of your parent vertically.
Other method is to make your element display: inline-block; and give it vertical-align: middle. It will center vertically according to its siblings.


There's other things you can improve on but unfortunately I'm at work so I can't provide examples and a more comprehensive answer, sorry!