ionic-framework - 在 Ionic 4 项目中垂直居中离子菜单内容的推荐方法是什么？

Question

我需要将ion-menu内容垂直居中，以便从 UX 角度更容易访问。我不确定最好的方法。

这是ionic starter 项目代码，由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>

所以我正在尝试做类似下面的事情。

编辑：离子组件指令已经使用 flex。我正在寻找针对 Ionic 4 的特定解决方案（保持响应性），其中 ion-menu 嵌套在 ion-content 指令内的 ion-list 中。SO链接中提供的答案均不适用于我的问题。

Answer 1

Ionic 仅在左右选项中提供用于修复菜单栏的 API。如果你想像上面的图片一样，你可以使用你自己的 css，比如 'margin-top: 80px'

Answer 2

您可以使用网格布局或弹性布局来实现此目的。由于您只有一个维度的元素，因此水平、flex 将是一个理想的选择。试试下面的代码

.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>