コンポーネントの中央揃えの方法。 material ui on Reactjs。

Question

material uiとreactjsにて、ウェブアプリの作成をしています。

現在、作成した機能を中央揃えしたく、試行錯誤しましたが、一向に中央揃えにならず、質問した次第です。

中央揃えしたい例：

            <div>
              <Card>
              <CardTitle title='Make new post'  subtitle={this.state.username} />
                <CardText>
                  <p>
                  <TextField
                    id="post_title"
                    floatingLabelText="type the title"
                    value={this.state.post_title}
                    onChange={this.handleChange_title}
                    />
                  <br />
                  <TextField
                    floatingLabelText="type the body"
                    multiLine={true}
                    value={this.state.post_body}
                    onChange={this.handleChange_body}
                    multiLine={true}
                    rows={2}
                    />
                  <br />
                  <RaisedButton
                    label="posting"
                    secondary={true}
                    onClick={this.handleSubmit}
                    />
                  <br />
                  </p>
                </CardText>
              </Card>
            </div>

この部分を中央揃えにするには、どのようにcssを記述し、importし、どこのタグにどう書き込めばいいかを教えていただけると幸いです。

参考までに現在の配置状態は

このような状態です。

Answer 1

Gridを使うと中央揃えできます

<Grid container alignItems="center" justify="center">
  <Grid item xs={8}>
    <Card>
     ・・・・
    </Card>
  </Grid>   
</Grid>

Answer 2

それぞれの要素の親
たとえば
<Cardtext>
に
<Cardtext
style={{
margin:'auto',
width:'50%'
}}

とすればできます。