default css parameters for form and div html elements - html

Question

Quick question:
I am trying to reengineer a mailchimp pop up. There is a form element that is centered on the document, I'd like to convert it to a div element (simply to replace "form" with "div"). Problem is when I do, it is no longer centered.
Clearly there are differences in the default css for each of these two elements, what are they?
It isn't "display:block"
Thanks
<style type="text/css">
#mc_embed_signup{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8); z-index:10000; }
#mc_embed_signup form{position:fixed; top:10%; left:50%; width:50%; margin-left:-17%; font:normal 100% Helvetica,Arial,sans-serif; font-size:14px; border-radius:4px; border:none; padding:0; background-color:#fff; color:#000; text-align:left; overflow-y:auto; overflow-x:hidden; }
#mc_embed_signup a.mc_embed_close{ cursor:pointer; }
#mc-embedded-subscribe .button{ margin:0; padding:0; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#mc_embed_close").click(function(){
$("#mc_embed_signup").hide();
});
alert($("#mc-embedded-subscribe-form").css('display'));
});
</script>
<div id="mc_embed_signup">
<form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate style="width:500px; height:500px; background-repeat:no-repeat; background-position:center;">
<div class="mc-field-group">
<div style="position:relative">
<a href="/support">
<img src="/images/pop-ups/summer-drive-button.png" style="position:absolute; top:350px; border:1px dotted #ccc" />
</a>
<img src="/images/pop-ups/summer-drive.jpg" />
</div>
</div>
<a id="mc_embed_close" class="mc_embed_close" style="position:absolute; top:5px; right:10px;">×</a>
<div class="clear"></div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="position:absolute; top:0; left:0; display:none"></div>
<div class="response" id="mce-success-response" style="width:300px; position:absolute; background-color:#FFF; top:30px; left:75px; display:none"></div>
</div>
</form>
</div>

Answer 1

The default style for a form differs depending on the browser and the rendering mode, but it's just a block element with some margin or padding.
Your CSS specifies position:fixed for the form element, and places it in the center of the window. If you exchange the form element for a div, you have to change the CSS so that it applies to the div instead. You probably want to add a class to the div so that you can target it specifically.