title: How to center login form in web page/browser using Antd?
body: <p>Current output:
  <img src="https://i.stack.imgur.com/zbPXO.png" alt="login form" /></p>
  <pre><code>&lt;Row type=&quot;flex&quot; justify=&quot;center&quot; align=&quot;center&quot;&gt;
      &lt;Col span={4} &gt;
        &lt;form onSubmit={handleSubmit(this.handleSubmit)} &gt;
          &lt;Field
            style={{ marginBottom: 12 }}
            prefix={&lt;Icon type=&quot;user&quot; style={{ color: 'rgba(0,0,0,.25)' }} /&gt;}
            name=&quot;name&quot;
            type=&quot;text&quot;
            component={AInput}
          /&gt;
          &lt;Field
            style={{ marginBottom: 12 }}
            className=&quot;form-group&quot;
            prefix={&lt;Icon type=&quot;lock&quot; style={{ color: 'rgba(0,0,0,.25)' }} /&gt;}
            name=&quot;password&quot;
            type=&quot;password&quot;
            component={AInput}
            /&gt;
  
            &lt;Button
  
              block
              type=&quot;primary&quot;
              htmlType=&quot;submit&quot;
              className=&quot;login-form-button&quot;
            &gt;
              Log in
            &lt;/Button&gt;
        &lt;/form&gt;
      &lt;/Col&gt;
    &lt;/Row&gt;
  </code></pre>
  <p>above login form need to center in web page, i tried it using antd styling elements but failed. it would be using css inline styling but i do not want to this way.</p>