html - 在 CSS 中以不同文本大小居中 HTML 正文元素

Question

我在尝试使用 CSS 将 body 元素居中时遇到了问题。我希望它在页面上水平和垂直居中。问题在于它现在的编写方式，它将使短消息的文本居中(即在三个词以下)，但较长的消息会把它搞砸。

这是我的 CSS:(它是 Sinatra 的 erb 文件，但我认为这不会影响 CSS 的解释方式)

body {
  background: white;

  /*TODO: still not perfect; changes based on length of message */
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}
.message {
  color: #2f4f4f;
  font-family: 'Roboto', sans-serif;
  font-size: 36;
  text-align: center;
}
.form {
  text-align: center;
}
input[type=number]{
  width: 100%;
  border: none;
  border-bottom: 6px solid #2f4f4f;
  background: transparent;
  text-align: center;
  color: #2f4f4f;
  font-size: 25px;
  font-family: 'Roboto';
}
input[type=number]:focus {
  outline: none;
}
#btn{
  display: none;
}

Answer 1

body {
    /* ... */
    position: fixed;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

请确保移除边距。