Javascript 如何使用过渡动画使div居中

这是演示： 该演示仅适用于webkit浏览器（chrome或safari）

---

有四个盒子，每个盒子都有一个标题。当用户单击展开div时，div将被设置为展开。最初，标题位于左侧，但当div展开时，标题必须随着动画移动到中心。我使用填充使div对齐中心，但存在一个问题，即为了改变文本宽度，必须更改填充以使标题正确居中。请看一下代码，您会更好地理解它

删除填充，将标题居中放置在h3上，并尝试在自动和100%之间设置标题宽度的动画；使用nowrap确保标题保持在一行上

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

然后设置动画以

.expand h3 {
  width: 100%;
}

---

问题是，最初的标题是左对齐的，在扩展div时，标题必须居中。如何通过动画实现这一点。现在我对标题使用了display inline，在扩展div时，我增加了标题的左侧填充，使标题看起来居中对齐。但这种技术的问题是，对于不同的文本长度，应该改变填充，使标题完全居中