I am using a button in my nextjs page which is on its own row. I want the button to appear in the middle of the page because I think that will look best on both PC and mobile, but no matter what I try, the button element can't seem to move from its original position on the far left of the page.

Manually set margin-left and margin-right to specific percentages to move the button as close to the center of the page as possible without squeezing the button's text into the next line. This is the only way I've found to make the button move. But it doesn't look good and isn't practical. Depending on the state of the page, the text inside the button may be of different lengths, so the hard-coded left and right margins don't actually center the button.

I've tried 'margin: auto;', text-align/align-items/justify-content: center;, and even wrapping the button in a div, tried using css to center it on the div, not on the button superior.

This is my current code:

return ( 
 
{product.title}
  
Price: ${product.price}
 {isCheckout ? (  ) : (  )} 
 );

.pd-container { align-items: center; }

import React from 'react'; import classNames from 'classnames/bind'; import styles from './CartButton.module.css'; const cx = classNames.bind(styles); const CartButton = ({ onAddToCart }) => { return Add To Cart; }; export default CartButton;

.cart-button { background-color: #007bff; /* 按钮背景的蓝色 */ color: white; padding: 12px 24px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加轻微的阴影 */ transition: background-color 0.3s ease; /* 悬停时平滑过渡 */ text-align: center; } .cart-button:hover { background-color: #0056b3; /* 悬停时的深蓝色 */ }