HTML元素不居中

Question

我的sex-reg（注册页面的孩子不是居中）由于某种原因它停留在最左边？我需要它居中！

.register-page {
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;

  ...

  .gender-reg {
    border: solid yellow;
    @include scale-to-screen((
      margin-bottom: 10px
    ))
  }

<div class="gender-reg">
  <selection-dropdown params="all: allGenderChoices"></selection-dropdown>
</div>

基本上发生的事情是页面上的其他内容都是居中的，除了这个元素。我不知道为什么！通常保证金：汽车中心。我被困了！

Answer 1

100%的宽度不会使元素居中，因为没有额外的空间。

如果您将其设置为50%，那么它会将元素置于其父级中心。

试试这个：

.register-page {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  text-align: center;