(React) Margin auto not working for my pagination bar - css

Question

I am a beginner in Web Development.
Why can't I place the pagination bar to be horizontally centered?
I have tried to include width:100% and even display: block.
However, results are the same.
Thank you for your help.
I want to put the pagination in the center of the red border.
App.js
...
<Pagination postsPerPage={imagePerPage} totalPosts={totalImages} paginate= {paginate}/>
...
Pagination.js
import React , { useState, useRef, useEffect, useContext } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
const Pagination = ({ postsPerPage, totalPosts, paginate }) => {
const pageNumbers = [];
const [currentPage,setCurrentPage] = useState(1);
for (let i = 1; i <= Math.ceil(totalPosts / postsPerPage); i++) {
pageNumbers.push(i);
}
const totalNumOfPages = pageNumbers.length;
useEffect(() => {
console.log("Cureent Page:")
console.log(currentPage);
},[currentPage]);
return (
<nav>
<ul className='pagination' style={{width:'100%',margin:'auto',border: '1px solid red' }}>
<li class="page-item">
<a class="page-link" aria-label="Previous"
onClick={() =>{
if (currentPage > 1){
paginate(currentPage-1);
setCurrentPage(currentPage-1);
}
}
}
>
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
{pageNumbers.map(number => (
<li key={number}
className={ `page-item ${(currentPage === number)? 'active' : '' }`}>
<a onClick={() =>{ paginate(number);setCurrentPage(number)}} className='page-link' >
{number}
</a>
</li>
))}
<li class="page-item">
<a class="page-link" aria-label="Next"
onClick={() =>{
if (currentPage < totalNumOfPages){
paginate(currentPage+1);
setCurrentPage(currentPage+1);
}
}
}
>
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
);
};
export default Pagination;

Answer 1

Looks like you are using Bootstrap. .pagination is configured to be a Flex container. This is why your li elements are already displayed in a row. You can still use the concept of auto margins, but instead of doing it on the parent, you can use this property on the children.
li.page-item:first-child {
margin-left: auto;
}
li.page-item:last-child {
margin-right: auto;
}

Answer 2

First, you need to put your elements into div as below, and move the ul style part to a separate div.
<div className="text-center">
<div style={{width:'100%', border: '1px solid red', height : '40px'}}>
<nav>
<ul className='pagination' >
....
Second, override pagination class with
.pagination {
display: inline-flex;
}
Here is the live demo.