此问题在此处已有答案：

How can I vertically center a div element for all browsers using CSS?（48个答案）
How to make a div 100% height of the browser window?（38个答案）
两个月前关门了。
在这个Ionic/ReactJS项目中，您可以自己尝试Stackblitz：
https://stackblitz.com/edit/ionic-react-routing-ctdywr?file=src%2Fpages%2FGreetings.tsx
我有以下代码：

import React from 'react';
import { IonButton, IonContent, IonPage } from '@ionic/react';

const Greetings = () => {
  return (
    <IonPage className="loginPage">
      <IonContent fullscreen>
        <div
          className="container"
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
          }}
        >
          <IonButton>Say Hello</IonButton>
          <IonButton>Say World</IonButton>
        </div>
      </IonContent>
    </IonPage>
  );
};

export default Greetings;

它呈现以下DOM内容和CSS：

**我的问题是：**我希望里面的按钮是垂直和水平对齐的，但是我得到了你可以在下面的图像上看到的：

您可以看到按钮是靠上对齐的。
有什么办法可以解决这个问题吗？
谢谢你！