在文本上使用填充时是否可以让文本始终完美居中？

Question

我有一个像这样的简单布局：

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

应用此样式 sheet :

.centered {
text-align: center;
}

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

我正在寻找一种在 .msg class 上应用填充的方法，同时仍然保持 .msg 文本在正文中完美居中。

如你所见 fiddle :

padding 为 0，文本始终完美居中。

padding-0

如果我使用 padding 即 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>

添加了要显示的计时器。

在文本上使用填充时是否可以让文本始终完美居中？

Is it possible to have a text always perfectly centered while using padding on it?

html

css

centering