实现垂直水平居中的五种方法

参考博客：https://blog.csdn.net/bury_/article/details/79430943

1.基于表格样式

将要使内容居中的外层容器元素的display设置成table，内层内容块使用table-cell，然后分别设置水平和垂直居中：

            /*表格方案*/
            #table-father{
                display:table;
            }
            #table-child{
                display:table-cell;
                text-align:center;
                vertical-align:middle;
            }

2.基于绝对定位

有两种方法，一种利用transform属性，一种利用margin:auto （定位的缺点在于绝对定位可能影响布局，以及可能元素会显示模糊）

             /*绝对定位方案*/
            #position-child{
                position:absolute;
                top:50%;
                left:50%;
                transform:translate(-50%,-50%);
            }

或者2绝对居中，但如果是可变高度必须声明高度

.absolute-center {  
      margin: auto;  
      position: absolute;  
      top: 0; left: 0; bottom: 0; right: 0;  
      width:50%;
      height:50%;
} 

 3.基于视口单位

要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：

         /*相对于视口单位进行居中的解决方案*/
            #view-child{
                margin:50vh auto 0;
                transform:translateY(-50%);
            }

4.基于Flexbox

要考虑兼容性问题，兼容性写法：

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

当父元素设置为display:flex后，子元素设置margin:auto就可以相对于父元素在垂直和水平方向进行居中：

        /*基于伸缩盒的解决方案*/
            #flex-father{
                display:flex;

            }
            #flex-child{
                margin:auto;
            }

如果不使用margin使用flex中的属性，父元素也可以写成：

div#flex-father{
    display:flex;
    align-items:center;
    justify-content: center;
}

总结

垂直居中有四种方法：

1.基于表格样式，可以不使用表格元素而在需要内容居中的容器元素上设置display:table-cell以及text-align和vertical-align属性设置居中；

2.基于绝对定位，可能影响布局和出现显示模糊的问题

3.基于视口单位实现相对于视口居中

4.基于Flexbox，需要考虑浏览器支持