PayPal 按钮的水平居中，其宽度指定为百分比

Question

请查看这个游乐场，其中展示了此 React 代码：

import React from "react";
import ReactDOM from "react-dom";
import {
  PayPalScriptProvider,
  PayPalButtons,
  usePayPalScriptReducer
} from "@paypal/react-paypal-js";
import "./styles.css";

function App() {
  return (
    <div className="hv-center-container">
      <div>
        <div className="thank-you h-center-container">
          <div>Make the viewport as wide as you can, and some more</div>
        </div>
        <div className="h-center-container">
          <PayPalScriptProvider>
            <div className="paypal">
              <PayPalButtons
                style={{
                  layout: "vertical",
                  shape: "pill",
                  tagline: false,
                  height: 55
                }}
              />
            </div>
          </PayPalScriptProvider>
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

和风格：

.hv-center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100%;
}

.h-center-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.thank-you {
  font-size: 3em;
  margin-bottom: 1em;
}

.paypal {
  width: 100%;
}

如果我以像素为单位指定了

width

规则的

.paypal

属性，PayPal 按钮将正确居中。但现在它是百分比，他们不这样做。 为什么会发生这种情况以及如何解决它？