Javascript 在弹出模式中将图像移动到中心

我正在使用reactjs弹出库中的弹出模式组件。我想将图表图像（一幅图像中有三张图表）放在弹出窗口的中心，但是像align self这样的属性似乎不适合我。我还能试什么

export default () => (
  <Popup
    trigger={<button className="button"> Guide </button>}
    modal
    nested
  >
    {(close: any) => (
      <div className="modal">
        <button className="close" onClick={close}>
          &times;
        </button>
        <div className="header"> Guide </div>
        <div className="content">
          {' '}
          {/* <img src={chart} alt="charts" className="charts"/> */}
          <img src={img} alt="charts" className="charts" />
          What is overfitting?
          <br />
          What is underfitting?
          This example demonstrates the problems of underfitting and overfitting and how we can use linear regression with polynomial features to approximate nonlinear functions.
        </div>
        <div className="actions">
        </div>
      </div>
    )}
  </Popup>
);

---

我还想在中间的图像下移动文本

什么是过盈的
。
添加
显示：flex
到
.modal>内容的css类
。此外，要对齐中间的项目，需要设置
flex direction:column和
对齐项目：在同一css类中居中

我还建议您在此阅读flex对齐的概念。
我添加了这些，但随后弹出窗口延伸至全屏，图像向左移动，文本向右移动：（好的，你能试着用
flex-direction:column；
和
align-items:center
而不是justify-content吗？我100%肯定这可以用flex-box布局实现，所以也许你可以自己使用链接的资源（或其他资源）来解决这个问题
.modal {
    font-size: 12px;
    border-color: black;
    border-style: solid;
  }
  .modal > .content {
    width: 100%;
    padding: 10px 5px;
    background-color: white;
  }
  .modal > .actions {
    width: 100%;
    padding: 10px 5px;
    margin: auto;
    text-align: center;
    background-color: white;
  }
  .charts {
    align-self: center;
  }