如何使用Flexbox将两个按钮对齐到“ position：absolute”的div的中心？

Question

这是到目前为止我的代码的结果：

我实际上想要实现的是将两个按钮水平移动到中心。但是此刻，它们向左对齐。

这是我想要实现的结果：

我尝试过alignItems，但没有效果。我不想使用任何margin，因为容器的大小可能会有所不同。

这是我的代码：

const H = "540px";
const W = "720px";

const ContentView = ({ width, height }) => (
  <div style={{ width, height, border: "1 solid red" }}>Hello! Alt View!</div>
);

const ControlView = ({ width, height, onReveal, onCopy }) => {
  const container = {
    width,
    height,
    position: "relative"
  };
  const controlsContainer = {
    width,
    height,
    position: "absolute",
    left: 0,
    top: 0,
    border: "5px solid green",
    display: "flex"
  };
  return (
    <div style={container}>
      <img style={{ width, height }} src="https://i.imgur.com/MQcuk3n.jpg" />
      <div style={controlsContainer}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <div>
            <button
              style={{
                width: "400px",
                height: "60px",
                minWidth: "200px",
                display: "block"
              }}
              onClick={onReveal}
            >
              Reveal
            </button>
          </div>
          <div>
            <button
              style={{ width: "400px", height: "60px", minWidth: "200px" }}
              onClick={onCopy}
            >
              Copy Meta
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { playing: false };
  }

  _onReveal() {
    this.setState({ playing: true });
  }

  _onCopy() {
    window.alert("Meta data copied");
  }

  renderAltView() {
    return <AltView />;
  }
  render() {
    const { width, height } = this.props;
    if (!this.state.playing) {
      return (
        <div>
          <h2>Controls</h2>
          <ControlView
            width={width}
            height={height}
            onReveal={() => this._onReveal()}
            onCopy={() => this._onCopy()}
          />
        </div>
      );
    }
    return (
      <div>
        <ContentView />
      </div>
    );
  }
}
ReactDOM.render(<App width={W} height={H} />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

不幸的是，我无法在SO代码片段中使用它。一个有效的版本在codepen https://codepen.io/kongakong/pen/EpRKPx

中

我可以使用哪种flex指令来定位按钮？

Answer 1

您还需要将所有子元素放在父div的中心。因此，您需要将flexbox属性设置为controlsContainer。

const controlsContainer = {
    width,
    height,
    position: 'absolute',
    left: 0,
    top: 0,
    border: '5px solid green',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
};

工作示例：

const H="540px";
const W="720px";

const ContentView = ({width, height}) => (
  <div style={{width, height, border: '1 solid red'}}>Hello! Alt View!</div>
)

const ControlView =  ({width, height, onReveal, onCopy}) => {
  const container = {
    width,
    height,
    position: 'relative',
  };
  const controlsContainer = {
    width,
    height,
    position: 'absolute',
    left: 0,
    top: 0,
    border: '5px solid green',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  };
  return (
    <div style={container} >
      <img style={{width, height}} src="https://i.imgur.com/MQcuk3n.jpg" ></img>
      <div style={controlsContainer}>
        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
          <div>
            <button style={{ width: '400px', height: '60px', minWidth: '200px', display:'block'}} 
               onClick={onReveal}>Reveal</button>
          </div>
          <div >
              <button style={{width: '400px', height: '60px', minWidth: '200px'}} 
                onClick={onCopy}>Copy Meta</button>
          </div>
        </div>
      </div>
    </div>
  )
}

class App extends React.Component{
  constructor(props){
   super(props);
   this.state = {playing: false};
  }
  
  _onReveal() {
    this.setState({playing: true})
  }
  
  _onCopy() {
    window.alert('Meta data copied')
  }
  
  renderAltView() {
    return (
      <AltView />
    )
  }
  render(){
    const { width, height } = this.props;
    if (!this.state.playing){
      return (
        <div>
          <h2>Controls</h2>
          <ControlView width={width} height={height} 
                onReveal={() => this._onReveal()}
                onCopy={() => this._onCopy()}
                />
          </div>);
    }
    return (<div><ContentView /></div>);
  }
}
ReactDOM.render(<App width={W} height={H}/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Answer 2

将justify-content: center;添加到绝对位置的DIV（controlsContainer）中