Why is my commandButton in an awkward position when centering using <div>?

Question

I attempted to center my <apex:commandButton> with <div align="center"> but it places it sort of between the center and the right side instead. Why might this be?

VF Markup snippet

          <!--Submit button-->
      <!--PageBlock starts-->
      <apex:pageBlock>
      <apex:pageBlockButtons location="top">
      <div align="center">
            <apex:commandButton action="{!save}" value="Submit Referral"/>
             </div>
      </apex:pageBlockButtons>
          <br/>
          <br/>
      <div style="text-align:center">
      <p>By clicking this button, you are agreeing to start the registration process.</p>
      </div>
    </apex:pageBlock>
    <!--PageBlock ends-->
  </apex:form>
</apex:page>

Answer 1

The default apex:pageBlock header includes a "title", even if you don't include a title. Thus, the buttons are centered, but with space for a title. To get it absolutely centered, you need to override the entire header:

<apex:pageBlock>
 <apex:facet name="header">
  <div class="text-align: center">
   <apex:commandButton value="Whatever" action="{!whatever}" />
  </div>
 </apex:facet>
 ...
</apex:pageBlock>