title: How to center a single colum in semantic-ui grid
body: <p>I want to center a login form, in a login page. the form be centered on desktop and full width on mobile. I tried this, but it does not work. I have this instead.
  <a href="https://i.stack.imgur.com/J9rYS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J9rYS.png" alt="enter image description here" /></a></p>
  <pre><code>    &lt;div class=&quot;ui middle aligned center aligned grid&quot;&gt;
      &lt;div class=&quot;column&quot;&gt;
          
          &lt;div class=&quot;ui error message&quot;&gt;
              &lt;p&gt;Your username and password didn't match. Please try again.&lt;/p&gt;
          &lt;/div&gt;
          
          &lt;form method=&quot;post&quot; class=&quot;ui large form error&quot;&gt;
              &lt;div class=&quot;ui stacked segment&quot;&gt;
               
                  {% for field in form %}
                  &lt;div class=&quot;field {% if field.field.required %}required{% endif %}&quot;&gt;
                      &lt;div class=&quot;ui left icon input&quot;&gt;
                          &lt;i class=&quot;user icon&quot;&gt;&lt;/i&gt;
                          {{ field }}
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% endfor %}
                  &lt;button type=&quot;submit&quot; value=&quot;Send&quot; class=&quot;ui primary button&quot;&gt;Log in&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>