css - 在 Ionic 中垂直居中内容？

Question

我希望能够在屏幕上将大部分内容垂直居中:

例如

• 表格
• 按钮

这可能与某些自定义 css 类有关吗？

现在我正在使用下面的代码。它有效，但不是很好，因为我选择了内容开始的百分比。所以我需要为每个页面设置其中一个，如果内容变长，我必须修改百分比。

.loginForm .scroll {
  height: 100%;
}
.loginForm .loginForm-wrapper {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
}

Answer 1

有多种方法可以使内容垂直居中。我经常使用 transform 它们的方式。假设您有一个容器，另一个元素应该在其中居中。

.container {
  position: relative; /* required */

  height: 150px;
  width: 100px;
  background: #efefef;
  text-align: center;
  border-radius: 4px;
}
.center-me {
  display: block;
  font-family: Consolas;
  font-size: 12px;
  padding: 5px 10px;
  background: #000;
  color: #fff;
  border-radius: 4px;

  position: absolute; /* required */
  top: 50%; /* required */
  left: 50%;
  transform: 
    translateY(-50%) /* required */
    translateX(-50%);
}

<div class="container">
  <div class="center-me">
    center
  </div>
</div>