bookmark_borderCentering An Entire Form

Here’s a quick CSS snippet that will allow you to center an entire form. Replace 2 in #gform_wrapper_2 with the id of your form:

/* keep it mobile friendly by only applying these styles for larger viewports */
@media only screen and (min-width: 641px) {

 body #gform_wrapper_2 { 
  max-width: 50%;
  margin: 0 auto;
 }

 body #gform_wrapper_2 ul li.gfield .ginput_container,
 body #gform_wrapper_2 ul li.gfield .gfield_description,
 body #gform_wrapper_2 div.ginput_complex label,
 body #gform_wrapper_2 input:not([type='radio']):not([type='checkbox']):not([type='submit']), 
 body #gform_wrapper_2 select, 
 body #gform_wrapper_2 textarea { 
  text-align:center;
 }

 body #gform_wrapper_2 ul.top_label li.gfield label.gfield_label {
  text-align: center;
  display: block;
 }
  
  body #gform_wrapper_2 .gform_footer,
  body #gform_wrapper_2 .gform_page_footer{
    text-align: center;
  }

}

That custom CSS should be placed in your theme style.css file or any other place that your theme provide for that purpose. Or you can also use any of the third-party plugins that allows you to add custom CSS rules to your WordPress without using the theme resources ( e.g. Reaktiv CSS Builder ).

If you’re using any caching solution make sure that your have flushed the cache and turned it off while you’re working in the CSS changes.