title: Why centering children of "ion-content" doesn't work but centering children of a "div" does?
body: <p>I am trying to center children of <code>ion-content</code> using this <code>HTML</code> and <code>SCSS</code> codes:</p>
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar color=&quot;primary&quot;&gt;
      &lt;ion-title&gt;
        GreenWalls application
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content class=&quot;center&quot;&gt;
    &lt;ion-card&gt;
      &lt;ion-card-content&gt;
        Awesome content
      &lt;/ion-card-content&gt;
    &lt;/ion-card&gt;
  &lt;/ion-content&gt;
  
  ion-card {
    max-width: 350px;
  }
  
  .center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  </code></pre>
  <p>But this approach doesn't result in centered content:</p>
  <p><a href="https://i.stack.imgur.com/hZdXZm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hZdXZm.png" alt="enter image description here" /></a></p>
  <p>When I wrap the <code>ion-card</code> in <code>div</code> element and use the SCSS on the div element suddenly it works:</p>
  <pre><code>&lt;ion-content&gt;
    &lt;div class=&quot;center&quot;&gt;
      &lt;ion-card&gt;
        &lt;ion-card-content&gt;
          Awesome content
        &lt;/ion-card-content&gt;
      &lt;/ion-card&gt;
    &lt;/div&gt;
  &lt;/ion-content&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/kIsyOm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kIsyOm.png" alt="enter image description here" /></a></p>
  <p>I don't wanna wrap content of each <code>ion-content</code> in <code>div</code> tags. Why the <code>SCSS</code> doesn't apply to the <code>ion-content</code>? How can I make it work in Ionic 4?</p>