css垂直居中

垂直居中有几种实现方式

1. 父元素上下padding设置成一样大小
   代码
   2.绝对定位
   position: absolute;
   left: 50%;
   top:50%;
   margin-left: -自身宽/2;
   margin-top: -自身高/2; /* 或者transform: translate(50%, 50%) //自身宽高50% */

代码

3.vertical-align: middle; // 行内元素和表格
在使用到vertical-align: middle;的时候，我发现不起作用。经过看视频和百度，才发现我的理解是有问题的，不只是单单给想要的元素上加上displsy: inline-block; vertical-align: middle;，而是要明白，这个vertical-align: middle是以该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。有点绕，研究之后发现，其实说的就是 它其实要与另一个元素对齐，是以另一个元素来做参照物的，两个元素都设置了vertical-align: middle;才可以实现在同一个容器中垂直居中对齐。例如下面的示例，假设有两个行内元素a和b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如图：

title
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如图：
title
那么现在我想要一个div元素在另一个div父容器下实现垂直居中，那么我就可以在同一个父容器中添加一个看不见的元素，高度设置为100%，那么我这个div就可以实现在父容器中垂直居中了。
title
那么实现时，就可以利用伪类:before来做一个看不见的参照物元素，

.ct:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

具体代码
参考文章

4.table-cell
使用table-cell垂直居中，需要在父容器上设置display: table-cell; vertical-align: middle;
代码

实现如下效果，每种效果都只使用一个html 标签来实现

tips代码