He construido una tabla usando la función array.map en reaccionar. Por alguna razón (incluso antes de la tabla), la salida de array.map siempre está alineada a la izquierda. Me gustaría centrar toda la mesa.

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; }

Probé todos los códigos css anteriores y más, intenté poner la tabla en una columna de bulma y centrarla, etc. Puedo centrarla usando márgenes, pero me preocupa que pueda causar errores en pantallas de diferentes tamaños, también tengo la configuración centrada pantalla para flexionar pero eso arruinó el contenido de la tabla.

¡Gracias por cualquier ayuda!