2019-09-03 垂直水平居中

方法一：

我们知道，对于inline-block 元素，设置text-align:center;可以让其在容器内水平居中，但垂直居中就有些问题了，这里，我们要借助表格来完成：

我们设置想要居中的元素的容器的CSS属性：

display: table-cell;
text-align:center;
vertical-align: middle;

相当于把容器视为一个td，然后内部的内容进行居中设置。
但有一个瑕疵：容器 必需用数值设置 width、height，设置百分比还不行，应该是因为当容器视为td后，它的高宽由内部因素撑起，而不是依靠百分比计算。

方法二：

设置容器和待居中因素的position属性，利用其可以用百分比定位的属性。

    #div1{
        width:100%;
        height:100%;
        background-color:green;
        position:relative;

    }
    #img1{  
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-215;
        margin-left:-410;
    }

在此方法里，百分比倒是可以用了，但是必需知道待定位的元素的width、heigth，以将其回移一些，不然不是居中。

方法三，和方法二差不多

    #img1{  
            position:absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
    }

主要是这个不用知道待定位元素的宽高

方法四

    #img1{  
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
    }

思想和方法二一样，即先把待定位元素的顶、左边距给设置为50%，再回退待定位元素的宽高的一半。主要是回退的方法不一样，方法二采用人工接受，写死的方法。这里采用translate方法自动计算。

方法五

        display:flex;
        justify-content: center;
        align-items:center;

三行代码搞定，设置容器的display，然后设置相关属性即可。

csdn插图点击居中是这样实现的：

    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 99999999;
    background: rgba(255, 255, 255,0.8);
    overflow: auto;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;

参考：
前端面试经典问题：CSS中居中的几种方式

https://www.cnblogs.com/chen-cong/p/8076442.html
https://segmentfault.com/q/1010000003490990/a-1020000003491167