如何在HTML和CSS中实现div块内文本在变换过渡全程保持居中？

你的问题出在用固定的top: 40px来实现居中——这个值只适配了div初始的100px高度，当div hover时尺寸放大到300px，40px的偏移自然不再是居中位置；再加上div的transform: rotate(360deg)会改变元素的坐标空间，relative定位的文本会跟着这个变换出现偏移错乱。

咱们换用现代CSS布局方案，不需要硬编码偏移值，就能让文本在容器变换全程保持完美居中：

方案一：Flexbox布局（最常用） #

只需要修改div的CSS样式，利用Flexbox的居中能力，同时去掉p标签里的硬编码定位样式：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: rgb(147, 141, 223);
  transition: width .6s, height .6s, transform .6s;
  /* 新增Flexbox居中属性 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: relative;
}
div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}
p {
  /* 移除原来的position和top属性 */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
  /* 可以保留文本的字体样式，不需要transition了 */
}
</style>
</head>
<body>
<div>
  <b><p>Hello</p></b>
</div>
</body>
</html>

方案二：Grid布局（更简洁） #

如果觉得Flexbox的属性有点多，用Grid可以一行代码搞定居中：

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background: rgb(147, 141, 223);
  transition: width .6s, height .6s, transform .6s;
  /* 一行实现水平+垂直居中 */
  display: grid;
  place-items: center;
  position: relative;
}
div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}
p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: white;
}
</style>
</head>
<body>
<div>
  <b><p>Hello</p></b>
</div>
</body>
</html>

为什么这两个方案能解决问题？ #

Flexbox和Grid都是基于容器尺寸动态计算元素位置的布局方式，不管容器的宽高怎么变化、有没有旋转变换，它们都会自动重新计算文本的居中位置，完全不需要硬编码偏移量，同时也不会受transform变换的坐标空间影响。

另外，你原来给p标签加的transition也可以去掉了——因为文本的位置是由布局系统自动维护的，会跟着容器的过渡动画平滑变化，不需要额外加过渡效果。

内容的提问来源于stack exchange，提问作者pr0grammar