How do I get block to align center?

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;

Does this answer your question? [How to vertically align an image inside a div](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) — Prathamesh More, Sep 12 '20 at 11:01

score 0 · Answer 1 · answered Sep 12 '20 at 11:08

0

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>

answered Sep 12 '20 at 11:08

Brian Wiltshire

447
4
15

How do I get block to align center?

1 Answers1