CSS进阶之形变与动画 ：transform、垂直居中总结、transition动画、animation动画、vertical-align

/* 水平居中 */
.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
/* 垂直居中 */
.center-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
}
 
/* 旋转 */
.rotate-90 {
  transform: rotate(90deg);
}
 
/* 动画：在5秒内将元素的透明度从0变为1 */
.fade-in {
  animation: fadeIn 5s forwards;
}
 
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
 
/* 过渡效果：鼠标悬停时，元素背景色从当前颜色到黑色 */
.background-color-transition {
  transition: background-color 0.5s ease-in-out;
}
 
/* 使用flexbox实现水平垂直居中 */
.center-both {
  display: flex;
  align-items: center;
  justify-content: center;
}

这个代码示例展示了如何使用CSS进行形变、垂直居中、动画制作和过渡效果。代码中包含了水平居中、垂直居中、旋转以及动画和过渡的基本用法。