How Can I Center Custom Content Container (Custom HTML)

[TheCottonMafia]

Hi I am having trouble getting a custom content section to vertically align to the center of the page. I am embedding code from my mailchimp signup form as custom html into a custom content section. I have managed to center the h2 tag with no issue but cannot seem to find where/how it is appropriate to center the whole section. I've seen other screenshots which show a vertical align drop down option but that is not available for me. Custom html code and screenshot below. Please and thank you!

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#000000; clear:left; font:18px Helvetica,Arial,sans-serif; }

	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://sincityhockeyclub.us4.list-manage.com/subscribe/post?u=a9a4b12f64ae20db555233d11&amp;id=3d698b3f25" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
    <div id="mc_embed_signup_scroll">
	<h2><center>Join The Club</center></h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
	<label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>
	<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group size1of2">
	<label for="mce-BIRTHDAY-month">Birthday  <span class="asterisk">*</span>
</label>
	<div class="datefield">
		<span class="subfield monthfield"><input class="birthday required" type="text" pattern="[0-9]*" value="" placeholder="MM" size="2" maxlength="2" name="BIRTHDAY[month]" id="mce-BIRTHDAY-month"></span> / 
		<span class="subfield dayfield"><input class="birthday required" type="text" pattern="[0-9]*" value="" placeholder="DD" size="2" maxlength="2" name="BIRTHDAY[day]" id="mce-BIRTHDAY-day"></span> 
		<span class="small-meta nowrap">( mm / dd )</span>
	</div>
</div>	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response" style="display:none"></div>
		<div class="response" id="mce-success-response" style="display:none"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_a9a4b12f64ae20db555233d11_3d698b3f25" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->

[oscprofessional]

Hello @TheCottonMafia,

To center the form

Please Search the code

<div id="mc_embed_signup">

Replace with below code

<div id="mc_embed_signup" style="text-align: center;">

[TheCottonMafia]

I replaced the code and there were no changes to the form.

[TheCottonMafia]

I may have misrepresented that I need it horizontally centered, not vertically.

[MeganD_94]

Try adding margin: auto instead of text-align: center

[artspotairbrush]

This worked for me.  Thank you Megan