html - 无法正确居中，边距 : 0 auto/margin:auto isn't working

Question

我有一些 HTML 代码目前让我非常头疼。基本上，网页是一个表单，中间有一个字段框，字段框后面有一个“提交”按钮，表单上方是两行文本。

我已经为两者都尝试了 text-align:center ，并且对于两行文本，它似乎将它们对齐为居中，但没有居中到页面的中间(我也试图让它响应) .

提交按钮只是保持居中，除非我把它放在我不想做的字段框中。这是我的代码:

.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>

我唯一想要保持良好运行的是“divvy”类，它使表单可靠地位于屏幕中央。如果有另一种可行的方法，请告诉我，因为我认为它可能会弄乱其他元素。

这是一个插件链接:https://plnkr.co/edit/H4uhcU

Answer 1

这是因为你的box-sizing是content-box(元素的宽度是在不加margin/padding/border的情况下计算的)。

要解决您的问题，一个简单的方法是使用 border-box 并将其应用于所有元素

* {
 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>