Css 分页未居中？

我制作了分页组件，但无法将其放在主页的中心。 我尝试了各种CSS样式，但分页并没有居中，它总是出现在主页的左侧

pagination.js：

import React, { Component } from 'react';

class Pagination extends Component {

    handleClick(val){
    this.setState({
        end:val*16,
        start:end-16
    });
    const end = val*16;
    this.props.onChange(end - 16, end);
    }

  render() {

    return (
      <div>
        <div className="container">                 
              <ul className="pagination">
                <li><a href="#" onClick={this.handleClick.bind(this, 1)}>1</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 2)}>2</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 3)}>3</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 4)}>4</a></li>
                <li><a href="#" onClick={this.handleClick.bind(this, 5)}>5</a></li>
              </ul>
          </div>
      </div>
    );
  }
}

export default Pagination;

我也尝试过这种风格：

.pagination {
    text-align: center;
    width: 100%;
}

请参见屏幕截图：

---

仔细检查其他覆盖css，居中分页就这么简单：

ulli{
显示：内联块；
}
.集装箱{
背景：红色；
文本对齐：居中；
}

仔细检查其他覆盖css，居中分页就这么简单：

ulli{
显示：内联块；
}
.集装箱{
背景：红色；
文本对齐：居中；
}

您也可以像这样使用flexbox：

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

---

这里有一个工作示例：

您也可以像这样使用

flexbox

：

.pagination {
  display: flex;
  justify-content: center;
}

.pagination li {
  display: block;
 }

---

这里有一个工作示例：

这段代码非常适合我

.pagination {
    display: inline-block !important;
    vertical-align: middle; 
}

---

这个代码非常适合我

.pagination {
    display: inline-block !important;
    vertical-align: middle; 
}

---

尝试>.container>文本对齐：居中。分页>显示：内联块尝试>.container>文本对齐：居中。pagination>display:inline block我不知道为什么，我使用bootstrap进行分页，效果很好，但当我将其转换为wordpress时，它不会居中分页，直到我使用此代码，然后所有内容都居中…你知道这段代码到底为什么工作吗？我也想知道为什么，我是@cmprogram的初学者我不知道为什么，我用bootstrap进行分页，效果很好，但是当我把它转换成wordpress时，它不会居中分页，直到我用了这段代码，然后一切都居中…你知道这段代码到底为什么工作吗？我也想知道为什么，我是一个初级@cmprogram