Modal not displaying in center of page with flexbox

Asked Mar 23 '17 at 17:00

Active Mar 23 '17 at 17:00

Viewed 28 times

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

I'm not sure why this wont position it in the centre. it is just hugging the left handside. any ideas how to make this display in the centre of the page using flexbox?

asked Mar 23 '17 at 17:00

The worm

5,580
14
36
49

is that the only styles? if so, that only aligns the content inside the modals to the center of the modals div – Pete Mar 23 '17 at 17:01
When did the `modal` tag become a thing? – Mooseman Mar 23 '17 at 17:01
@Mooseman https://www.npmjs.com/package/react-modal – The worm Mar 23 '17 at 18:51
@Theworm That's just sad. – Mooseman Mar 23 '17 at 21:08
@Mooseman whys it sad? – The worm Mar 24 '17 at 08:34
@Theworm Semantics and spec. – Mooseman Mar 29 '17 at 13:02

Modal not displaying in center of page with flexbox

0 Answers0