元素不会在Modal中居中

Question

我目前正在使用React Bootstrap Modal。我正在尝试使用flexbox将一个元素集中在一个模态中，但这样做有很多麻烦。下面是我的代码，以及它目前的样子。

import { Modal } from 'react-bootstrap'
import React from 'react';
import { Button } from 'react-bootstrap';
import * as welcome from '../../styles/welcome'

class Welcome extends React.Component{
constructor(props){
   super(props)
   this.state = {
    showModal: true
 }
this.close=this.close.bind(this)
this.open=this.open.bind(this)
}

 componentWillReceiveProps(nextProps){
  debugger
  if(nextProps.modal_content !== this.props.modal_content){
    this.setState({ showModal: true });
 }
}

close(){
  this.setState({ showModal: false });
}

open() {
  this.setState({ showModal: true });
}

 render() {

return (
  <div>
    <Modal style={welcome.welcomeBody} show={this.state.showModal} onHide={this.close}>

        <div style={{display: 'flex', justifyContent: 'center'}}>
           <div style={{backgroundColor: 'black', border: '1px solid black', borderRadius: '100%', width: '50px', height: '50px'}}></div>
       </div>


    </Modal>
  </div>
);
}
 }

导出默认欢迎

Answer 1

您正在flex中应用image来对齐center ...这是错误的......

Flex始终应用于parent容器，以便其子项使用flex功能。

将image换成div，然后将display:flex和justify-content:center应用于该div，以便图片居中对齐。

<div style={{display: 'flex',justifyContent: 'center'}}>
  <img src="pic.png"></img>
</div>

<div style="display: flex;justify-content: center;">
  <img src="http://via.placeholder.com/350x150">
</div>

更新代码

<div style="display: flex;justify-content: center;">
  <div style="background-color:black;border:1px solid;height:50px;width:50px;border-radius:50%;"></div>
</div>