What is the recommended way to center ion-menu contents vertically in an Ionic 4 project?

Question

I need to vertically centre the ion-menu contents so that it is easier to access from a UX perspective. I am not sure of the best way to do it.

This is the ionic starter project code, which was set up by ionic start myProjectName sidemenu.

<ion-content>
    <ion-card class="welcome-card">
      <ion-img src="/assets/shapes.svg"></ion-img>
      <ion-card-header>
        <ion-card-subtitle>Get Started</ion-card-subtitle>
        <ion-card-title>Welcome to Ionic</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>Now that your app has been created, you'll want to start building out features and components. Check out some of the resources below for next steps.</p>
      </ion-card-content>
    </ion-card>
    <ion-list lines="none">
      <ion-list-header>
        <ion-label>Resources</ion-label>
      </ion-list-header>
      <ion-item href="https://ionicframework.com/docs/">
        <ion-icon slot="start" color="medium" name="book"></ion-icon>
        <ion-label>Ionic Documentation</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/building/scaffolding">
        <ion-icon slot="start" color="medium" name="build"></ion-icon>
        <ion-label>Scaffold Out Your App</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/layout/structure">
        <ion-icon slot="start" color="medium" name="grid"></ion-icon>
        <ion-label>Change Your App Layout</ion-label>
      </ion-item>
      <ion-item href="https://ionicframework.com/docs/theming/basics">
        <ion-icon slot="start" color="medium" name="color-fill"></ion-icon>
        <ion-label>Theme Your App</ion-label>
      </ion-item>
    </ion-list>
</ion-content>

So I am trying to do something like below.

Edit: Ionic component directives already use flex. I'm seeking a solution specific (preserving the responsiveness) to Ionic 4 where an ion-menu is nested in an ion-list inside an ion-content directive. None of the answers provided in the SO links is applicable to my question.

Answer 1

You can use either a grid layout or a flex layout to achieve this. Since you have elements in only one dimension, horizontal, flex would be an ideal option. Try the below code

.menu {
  height: 500px;
  width: 250px;
  display: flex;
  align-items: center;
  flex-flow: column;
  justify-content: center;
}

.item {
  padding: 1em;
  border-bottom: 1px solid #ddd;
  width: 100%;
}

<div class="menu">
  <div class="item">
    Home
  </div>
  <div class="item">
    About
  </div>
</div>

Answer 2

Ionic give API for fix menu bar in left and right option only. If you want to make like the above image you can use your own css like 'margin-top: 80px'