Css 当我点击“保存”按钮时，我的整个表单向下移动了几个像素，我想避免这种情况

我想创建一个奇特的按钮，当有人点击它时，它看起来就像被点击了一样。不幸的是，我注意到在我的Mac（Chrome和Firefox的最新浏览器）上，当我点击“保存”按钮时，包含表单的整个div（由下面的“profile”id标识）在我点击“保存”按钮时向下移动了几个像素。我创建这个JSFIDLE是为了演示--。我有

<div id="profile" class="row">
  <div class="col-md-6 col-md-offset-3">
    <form class="edit_user" id="edit_user_2" action="/users/2" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="put" /><input type="hidden" name="authenticity_token" value="zNwIQCm3caY33TTc1cs3j2yCVI8VVCWhNHR7RsUuY/d0hqYjeMTCtS85diQv6nKGcX8PbzXTZYHQqCVthMWh1A==" />

    <h2>Tell Us More ...</h2>

      <div class="profileField"> 
      Height
      <input size="2" class="form-control" type="text" value="2" name="user[height_feet]" id="user_height_feet" /> ft. 

      <input size="2" class="form-control" type="text" value="1" name="user[height_inches]" id="user_height_inches" /> in. 
      </div>

      <div class="profileField">
      <label for="user_weight">Weight</label>
      <input size="3" class="form-control" type="text" name="user[weight]" id="user_weight" /> lbs.
      </div>

      <div class="profileField">
    <input type="submit" name="commit" value="Save" method="put" class="button" />
      </div>
</form>
</div>
</div>

如果我从按钮中删除'class=“button”'属性，那么当我单击按钮时，id=“profile”的div不会向下移动，但是我会丢失按钮上的所有样式。我如何调整东西，使我点击按钮时，只有我的按钮向下移动，而不是整个表单

编辑：容器（id=“profile”的元素）具有以下CSS。我想把屏幕中间的所有东西都集中到

#profile {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align:center;
}

---

您应该尝试更改窗体的大小。我认为你有一个固定的形状高度，按钮在底部，你的按钮最初有5px的底部边距，点击时会减少到0

因此，单击按钮时会占用额外的空间

---

我不认为你需要这个，但检查一下，如果一些css边距属性可能已经从你的大脑中消失了

这是因为

页边距底部在
：active
状态下被删除。您可以将相同的金额添加到
页边距顶部
，以弥补缺口

.button:active {
  margin-top: 5px;
}

我已经包含了容器元素（包含表单）的CSS。我不包括一个边距元素，但我试图把我的形式集中在屏幕的中间。BTW我提到了按钮边距（按钮类的第一个属性）而不是表单边距。我告诉过你要增加表格的高度（从中间的空白处开始？）。你在表格居中方面也有问题吗？我可以把所有的东西都居中。如果我按照你的建议取出按钮边距，当你点击按钮时，它看起来不再像是被按下了。如何在不移动整个表单的情况下保持这种效果？我创建了这个JSFIDLE来演示这个问题--。
.button:active {
  margin-top: 5px;
}