前端不定宽高水平垂直居中

秉承着不要写死，给自己挖坑的态度，在此只考虑不定宽高居中：有两种方法

一、行内居中

    1.父元素设置text-align：center，因为子元素为inline-block元素，来做水平居中

    2.子元素和另一个作为参考的子元素设置成inline-block元素，vertical-align:middle，参考子元素设置width:0,height:100%; 来做垂直居中

    页面结构如下：

    css代码如下：

二、定位居中    

    1.父元素相对定位relative 子元素绝对定位absolute

    2.子元素left:50%;top:50%;此时并没有考虑自身的宽高，需要往回收自身的50%宽高；这里通常的做法是采用margin负值来实现的，不过这里是考虑不定宽高，因此采用transform:translate(-50%,-50%);

    css代码如下