使用flexbox不会在页面中心显示模态

Question

 <div className="modals">
   <div className="channelModal" >
       <Modal className="modal" isOpen={this.state.isChannelModalOpen} onClose={() => this.closeChannelModal()}>
         <h1>Create a Channel</h1>
         <p><button onClick={() => this.createChannel()}>Create Channel</button></p>
       </Modal>
     </div>
   </div>

CSS

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

我不确定为什么这不会把它放在中心位置。它只是抱着左手边。任何想法如何使用flexbox在页面中心显示？