css - 在屏幕中间居中 Font Awesome

Question

In this jsfiddle我在左上角有一个旋转的 Font Awsome。如何显示在屏幕中间(垂直和水平)？

HTML

<i class="fa fa-spinner fa-spin"></i>

Answer 1

给它一个 50% 的内边距和 -8 像素的边距(原始大小的 50%)。 body 必须跨越整个窗口。为了防止滚动条的奇怪行为(由于附加到 .fa-spin 的动画)，请在容器上使用这些样式:

<div class="center-all">
  <i class="fa fa-spinner fa-spin"></i>
</div>

css如下:

html, body {
  width: 100%;
  height: 100%;
}

.center-all {
  padding: 50%;
  margin: -8px;
  width: 16px;
  height: 16px;
}

参见 https://jsfiddle.net/82z3t8dL/3/