如何将文本集中在 div 块上，该块在转换（HTML、CSS）时通过过渡保持集中？

Question

我有这个 div 块，上面有一个“你好”。该块的设计方式是当您将鼠标悬停在它上面时，它会变换并旋转 360 度（即回到其原始状态但更大一点）。我希望“你好”在整个过渡和转型期间都位于街区的中心。我使用集中它：

position: relative;  
top: 40px;  
transition: .4s;

在 CSS 中的 p 上，但是当 div 被转换时，文本最终位于块的顶部，即不集中。我该如何实现？

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: rgb(147, 141, 223);
  transition: width .6s, height .6s, transform .6s;
  text-align: center;
  position: relative;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}
p {
  position: relative;
  top: 40px;
  transition: .6s;
}

</style>
</head>
<body>

<div>
  <b><p style="font-family: Verdana, Geneva, Tahoma, sans-serif; color: white">Hello</p></b>
</div>

</body>
</html>

Answer 1

问题是您使用了两个独立样式的元素，因此当您旋转 div 时，您还应该使用 div:hover p 调整 div 中的 p选择器，更改 p 的顶部。

一个更直接的解决方案是完全放弃 p 的样式，并将所有必要的样式放在 div 和 div:hover 选择器中。
不过，我会选择 line-height 而不是改变位置。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: rgb(147, 141, 223);
  transition: width .6s, height .6s, transform .6s;
  text-align: center;
  position: relative;
  line-height:100px;      /* new: line height the same as the height */
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
  line-height:300px;      /* same */
}
p {
  transition: .6s;
}

</style>
</head>
<body>

<div>
  <b><p style="font-family: Verdana, Geneva, Tahoma, sans-serif; color: white">Hello</p></b>
</div>

</body>
</html>

Answer 2

您正在使用 p 的 top 属性使其居中，并且您没有在过渡时更改它。

您可以在调整 top 属性的地方添加一个 div:hover p 标签，但更简单的解决方案是使用 flexbox 让浏览器将 p 居中动态地；你只需要写在一个标签内，你不必自己计算像素。

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: rgb(147, 141, 223);
  transition: width .6s, height .6s, transform .6s;
  /* removing this:
  text-align: center;
  */
  position: relative;
  /* Adding flexbox properties to center a single 
     element within the current one: */
  display: flex;
  align-items: center;
  justify-content: center;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}

p {
  /* Removing this:
  position: relative;
  top: 40px;
  */
  transition: .6s;
}

</style>
</head>
<body>

<div>
  <b><p style="font-family: Verdana, Geneva, Tahoma, sans-serif; color: white">Hello</p></b>
</div>

</body>
</html>

如何将文本集中在 div 块上，该块在转换（HTML、CSS）时通过过渡保持集中？

How to centralize text on a div block that remains centralized through out the transition when transforming (HTML, CSS)?

html

css

css-transitions