在使用填充时，是否可以将文本始终完美地居中

Question

我有一个简单的布局：

<div class="centered">
<p class="msg">This is an important message</p>
</div>

使用此样式表：

.centered {
text-align: center;
}
.msg {
border: 1px solid red;
color: red;
display: inline-block;
padding: 200px;
}

我正在寻找一种在.msg类上应用填充物的方法，同时仍将.msg文本保持完美地为中心。

您可以在此小提琴中看到：

使用0的padding，文本始终是完美的中心。

padding-0

如果我使用 200px的 padding，则居中不再完美。

填充200

在使用填充时我该怎么办？

感谢您的任何帮助。

Answer 1

使用位置的组合并以这种方式进行转换：

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body, .centered {
  height: 100%;
}
.centered {
  position: relative;
}
.msg {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f90;
}

<div class="centered">
  <p class="msg">This is an important message</p>
</div>

添加了背景，以显示其完全居中。它还可以使用任何数量的文本：

window.onload = function () {
  setTimeout(function () {
    message.innerHTML = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
  }, 1000);
};

* {
  margin: 0;
  padding: 0;
  line-height: 1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body, .centered {
  height: 100%;
}
.centered {
  position: relative;
}
.msg {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f90;
}

<div class="centered">
  <p class="msg" id="message">This is an important message</p>
</div>

添加了一个计时器以显示。