Can't properly center things, and margin: 0 auto/margin:auto isn't working

Question

I have some code in HTML that's currently giving me a huge headache. Basically, the web page is a form with a fieldbox in the center, a "submit" button after the fieldbox, and above the form is two lines of text.

I've tried text-align:center for both, and for the two lines of text it seems to align them to be centered, but not centered to the middle of the page (I am also trying to make it responsive).

The submit button just stays left centered unless I bring it in the fieldbox which I don't want to do. Here is my code:

.divvy {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -150px;
}

#inputBox {
  clear: both;
  background-color: rgba( 0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #dbdbdb;
  font-weight: bold;
  width: 12em;
  padding-left: 0.2em;
  text-align: left;
}

#title {
  color: white;
}

#formy {
  color: #c6c6c6;
  background-color: #727272;
  background-color: rgba( 0, 0, 0, 0.5);
  border-radius: 1.2em;
  text-align: center;
  padding: 0.35em 1.25em 0.75em 0.75em;
  border: 0.1em solid;
  border-color: #727272;
  border-color: rgba(0, 0, 0, 0.3);
  width: 100%;
}

<div class="divvy" ng-repeat="slider in main.products">
  <div>
    <h3 align="center" id="title">TitleTitleTitle</h3>
    <h4 align="center">Subtitle Subtitle Subtitle</h4>
  </div>
  <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
    <fieldset id="formy">
      Name: <input id="inputBox" type="text" class="hvr-underline-reveal" required><br> Email: <input id="inputBox" type="text" required><br> Tourist <input type="radio" name="livingStatus" value="Tourist"> Resident <input type="radio" name="livingStatus"
        value="Resident">
    </fieldset>
    <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">
  </form>
</div>

The only thing I would like to keep that works well-enough is "divvy" class which makes the form reliably in the center of the screen. If there is another way to do this that works please let me know because I think that it may be messing up the other elements.

Here is a plunker link: https://plnkr.co/edit/H4uhcU

Answer 1

It's because your box-sizing is content-box (the width of the element is calculated without adding the margin/padding/border).

To fix your problem, a simple way is to use border-box and apply it to all elements

* {
 box-sizing: border-box;
}

* {
 box-sizing: border-box;
}
.divvy {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -150px;
}

#inputBox {
  clear: both;
  background-color: rgba( 0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #dbdbdb;
  font-weight: bold;
  width: 12em;
  padding-left: 0.2em;
  text-align: left;
}

#title {
  color: white;
}

#formy {
  color: #c6c6c6;
  background-color: #727272;
  background-color: rgba( 0, 0, 0, 0.5);
  border-radius: 1.2em;
  text-align: center;
  padding: 0.35em 1.25em 0.75em 0.75em;
  border: 0.1em solid;
  border-color: #727272;
  border-color: rgba(0, 0, 0, 0.3);
  width: 100%;
}

<div class="divvy" ng-repeat="slider in main.products">
  <div>
    <h3 align="center" id="title">TitleTitleTitle</h3>
    <h4 align="center">Subtitle Subtitle Subtitle</h4>
  </div>
  <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
    <fieldset id="formy">
      Name: <input id="inputBox" type="text" class="hvr-underline-reveal" required><br> Email: <input id="inputBox" type="text" required><br> Tourist <input type="radio" name="livingStatus" value="Tourist"> Resident <input type="radio" name="livingStatus"
        value="Resident">
    </fieldset>
    <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">
  </form>
</div>

Answer 2

Just add the following CSS.

input.btn.hvr-back-pulse {
  margin: 0 auto;
  display: block;
}

Answer 3

Have you tried using the center tag?

<div ng-repeat="slider in main.products">
  <center>
    <h3 id="title">TitleTitleTitle</h3>
    <h4>Subtitle Subtitle Subtitle</h4>


    <form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
    ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
      <fieldset id="formy" >


        Name: <input  id="inputBox" type="text" class="hvr-underline-reveal" required><br>
        Email: <input  id="inputBox" type="text" required><br>
        Tourist <input  type="radio" name="livingStatus" value="Tourist">   Resident <input type="radio" name="livingStatus" value="Resident">


      </fieldset>

      <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">

    </form>



  </center>
</div>

Now, I know the form looks too wide, but now you can go ahead and style your form to what you want.