I have built a table using the array.map function in react. For some reason (even before the table) the array.map output is always aligned to the left. I would like to center the whole table.

JSX:

<div className="center">
    <table className="center" style={{border:'solid',}}>
      <thead className="has-text-black-bis" style={{backgroundColor:"#e6be8a"}}>
        <tr>
          <th >Product Name:</th>
          <th >Unit Price:</th>
          <th >Quantity Available:</th>
          <th >Buy!</th>
        </tr>
      </thead>
      <tbody className="has-text-black-bis">
        {this.state.indices.map((a) => (
          <tr className="rows">
            <td ><strong>{this.state.itemNames[a]}</strong></td>
            <td ><strong>{this.state.costs[a]}</strong></td>
            <td ><strong>{this.state.quantities[a]}</strong></td>
            <td >
              <button type="button" className='create-btn' onClick={()=>this.buyItem(a)}>Buy!</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table> 
    </div>

CSS:

    .center {
  align-self:center;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
}

I have tried all the above css codes and more, tried putting the table in a bulma column and centering it etc. I can get it centered using margins but I am worried that may cause errors on different sized displays, I also get it centered setting display to flex but that messed up the table contents.

Thank you for any help!