nextjs ページの独自の行にあるボタンを使用しています。 PCとモバイルの両方で最も見栄えが良いと思うので、ボタンをページの中央に表示したいのですが、何を試してもボタン要素がページの左端の元の位置から移動できないようです。ページ。

margin-left と margin-right を特定のパーセントに手動で設定して、ボタンのテキストを次の行に押し込むことなく、ボタンをできるだけページの中央近くに移動します。これが私が見つけた唯一の方法です。ボタンは動きますが、見栄えも悪く、実用的ではありません。ページの状態に応じて、ボタン内のテキストの長さが異なる場合があるため、ハードコーディングされた左右の余白は実際にはボタンの中央に配置されません。

「margin: auto;」、text-align/align-items/justify-content: center; を試し、さらにボタンを div でラップし、CSS を使用してボタンを div ではなく div の中央に配置しようとしましたボタンが優れています。

これは私の現在のコードです: