如何调整元素高度并使用动画居中子元素？

可以使用CSS和JavaScript来调整元素的高度并使用动画居中子元素。下面是一个示例代码：

HTML:

<div class="parent">
  <div class="child">子元素</div>
</div>

CSS:

.parent {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.child {
  width: 100px;
  height: 50px;
  background-color: lightgreen;
  transition: height 0.5s;
  text-align: center;
}

.expand {
  height: 100px;
}

JavaScript:

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('click', function() {
  child.classList.toggle('expand');
});

这段代码创建了一个父元素和一个子元素。父元素使用flex布局来居中子元素。子元素具有初始高度，点击父元素后，通过添加或移除expand类来切换子元素的高度。动画效果通过CSS的transition属性实现。

点击运行代码后，您可以点击父元素来切换子元素的高度，并观察到动画效果。