reactjs - How do you center components using CSS?

Question

I am a React Native Developer and I have been assigned a web project by the company I am working for. If I was coding in React Native I could have completed this issue in a few hours. Anyways, I am creating a Modal and I need help centering things on my screen. Here is what I have.

Index.js

const Modal = ({ handleClose, show, classes }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <div  className={classes.modalContainer}>
        <section className={classes.contentContainer}>
          <div>
            <p>...</p>
          </div>
          <div className={classes.buttonContainer}>
            <button
              type="button"
              onClick="alert('Hello world!')"
              className={classes.downloadMobileApp}
            >
              Download mobile app
            </button>
            <button  type="button" className={classes.continueButton} onClick={handleClose}>
              Continue in browser
            </button>
          </div>
        </section>
      </div>
    </div>
  );
};

css

modalContainer: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: 'rgba(0, 0, 0, 0.6)',
  },
  contentContainer: {
    position: 'fixed',
    background: 'white',
    width: '80%',
    height: '80%',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%,-50%)',
    textAlign: 'center',
  },
  buttonContainer: {
    flexDirection: 'column',
    position:'fixed',
    bottom: 30,
  },
  downloadMobileApp: {
    backgroundColor: 'black',
    width: '75%',
    border: 'none',
    color: 'white',
    padding: '15px 32px',
    textAlign: 'center',
    textDecoration: 'none',
    display: 'inline-block',
    fontSize: 16,
    borderRadius: 30,
    marginBottom: 5,
  },
  continueButton: {
    border: 'none',
    backgroundColor: 'inherit',
    padding: '14px 28px',
    fontSize: '16px',
    cursor: 'pointer',
    display: 'inline-block',
  }

This is how it currently looks! Click Here

question from:https://stackoverflow.com/questions/65887384/how-do-you-center-components-using-css

Answer 1

Waitting for answers