如何让块对齐中心？

Question

如您所见，我正在尝试使用“margin：'auto'”将 div 与中心对齐。但它似乎不起作用。

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

我建议改为这样做。如果您不必支持旧浏览器

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