Centering the react component doesn't work - css

Question

LoginComponent.js
render() {
return (
<div className="col-md-6">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input value={this.state.email} onChange={this.handleChange} type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</form>
</div>
);
}
This is how my LoginComponent, which is just a login box component renders like above. I wanted to center align this.
Login.js
const loginStyles = {
display: 'flex', justifyContent: 'center'
}
class Login extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<LoginComponent style={loginStyles}/>
</div>
);
}
}
So, I simple used flex and justifiyContent to make the box go to center of the page, but it keeps staying on the top-left of the page. How can I handle this issue?

Answer 1

This is because passing style={loginStyles} to your LoginComponent does nothing, if you don't use that prop...
style must be set on an HTML tag. You could try wrapping your whole JSX with another div, as such:
render() {
return (
<div style={this.props.style}>
<div className="col-md-6">
<form>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Email address</label>
<input value={this.state.email} onChange={this.handleChange} type="email" name="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" />
<small id="emailHelp" className="form-text text-muted">We&apos;ll never share your email with anyone else.</small>
</div>
</form>
</div>
</div>
);
}
That way your LoginComponent will actually use the style prop passed by its parent.

Answer 2

Besides the other answer, you need also set the width of the parent div component for horizontal centering. So in your case you can set parent div width to `width: "100%"'
const loginStyles = {
display: 'flex',
justifyContent: 'center',
width: "100%"
}