css上下居中对齐的方法

CSS上下居中对齐是一项非常常用的技能，特别是在网页设计时。下面介绍几种实现上下居中的CSS方法。
第一种方法是通过flexbox布局实现上下居中。在容器上设置display:flex和align-items:center即可实现上下居中：

p{
   display:flex;
   align-items:center;
} 

第二种方法是通过使用table布局实现上下居中。首先将容器以table-display方式展示，然后将容器内部的元素以table-cell方式展示，并设置vertical-align:middle属性实现上下居中的效果：

p{
   display:table;
}
p span{
   display:table-cell;
   vertical-align:middle;
} 

第三种方法是通过绝对定位来实现上下居中。首先将容器设为相对定位，然后将内容以绝对定位方式（top:50%和translateY(-50%)）来实现上下居中：

p{
   position:relative;
}
p span{
   position:absolute;
   top:50%;
   transform:translateY(-50%);
} 

以上三种方法是实现CSS上下居中对齐的常用方法，其中最简单而且最易操作的方式是使用flexbox布局。需要灵活应用不同的方法来达到效果。