如何让块对齐中心？

Question

As you can see I am trying to align the div to the center using "margin: 'auto'". But it doesn't seem to be working.

import React, { Component } from 'react';
import './CenterBlock.css';

class CenterBlock extends Component {
    state = {
        styling: {
            margin: 'auto'
        }
    }

    render() {
        return (
            <div className="center__block__container" style={this.state.styling}>
                <div className="block">
                    <h1>Generate Password</h1>
                </div>
            </div>
        );
    }
}

export default CenterBlock;

Answer 1

I would suggest doing something like this instead.If you don't have to support old browsers

<div style={{display: 'flex', justifyContent: 'center'}}>
  <div>This content will be centered</div>
</div>