列中心元素整齐

Question

我刚刚开始整洁，我正在为一个网站的管理页面工作。我只是想重新创建一个非常标准的页面，其中的设置显示在屏幕的中央，我只是好奇你是如何做到这一点的整洁。

在过去，我可能会通过在我想要居中的大多数元素上设置margin-left: auto;和margin-right: auto来完成此操作。

这是我到目前为止所拥有的：

<!-- admin.html -->

...
<div class="settings">
  <div id="instagramLogin">
    <h3>Instagram</h3>
      <a href="https://instagram.com/.....">Sign in with Instagram</a>
  </div>
</div>
...

//admin.scss
.settings{
  @include span-columns(4);
  @include shift(4);
}

#instagramLogin{
  @include shift(2);
}

它在视觉上看起来很正确，但这似乎是错误的做法。