How to align the two buttons to the center of a div of 'position:absolute' using flexbox?

Question

This is the outcome of my code so far:

What I actually want to achieve is to move the two button to the center horizontally. But at the moment they are aligned to the left.

This is the result I want to achieve:

I have tried alignItems but it has no effect. I don't want to use any margin because the container size may vary.

Here is my code:

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>

Unfortunately I cannot get it to work in SO code snippet. A working version is here at codepen https://codepen.io/kongakong/pen/EpRKPx

What flex directive I can use to position the buttons as I want?

@Paulie_D How is this a duplicate question of what you're suggesting? — Lars Munkholm, Aug 03 '18 at 12:08
@LarsMunkholm I added more duplicate, we can still add more and more and more if you want ;) — Temani Afif, Aug 03 '18 at 12:15

score 1 · Accepted Answer · answered Aug 03 '18 at 12:08

You also need to center all the child elements in the parent div. So in your case you need to set the flexbox properties to the controlsContainer.

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

Working example:

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>

How to align the two buttons to the center of a div of 'position:absolute' using flexbox?

1 Answers1