javascript - 如何使用过渡动画使 div 居中

Question

这是演示:Demo该演示仅适用于 webkit 浏览器(chrome 或 safari)

有四个框，每个框都有一个标题。当用户点击展开 div 时。 div 用于扩展。最初标题在左边，但是当 div 展开时，标题必须移动到动画中心。我已经使用 padding 使 div 居中对齐，但是有一个问题，对于不同的文本宽度，padding 必须是更改以使标题正确居中。请看一下代码，你会更好地理解它

Answer 1

移除填充，将标题居中放置在 h3 上，并尝试将标题的宽度设置为介于 auto 和 100% 之间；使用 nowrap 确保标题保持在一行。

h3 {
  text-align: center;
  width: auto;
  white-space: nowrap;
  ...
}

然后动画到

.expand h3 {
  width: 100%;
}