实现垂直水平居中的方法

因为这一类型题目我面试的时候被问了很多遍，然后就想总结一下吧。大概分了几类。
html代码如下：

<div id="parent">
    <div id="child"></div>
</div>

其样式#container {
width: 300px;
height: 300px;
background-color: #000;
}

#child {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

第一类<不知道父元素的宽高和子元素的宽高>

1. 利用绝对定位（其百分比是相对于父元素而言）和transform的translate属性（其百分比是相对于其自身而言）

 #container {
    position: relative;
}

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

} 

（2） 利用父元素中设置display:table-cell；来把子元素模拟成一个表格单元格，再设置text-align=center；vertical-align：middle，还要将子元素设置为inline-block，（只是用于ie8+，ff,opear,chrome等现代浏览器）

#container {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    #child {
        display: inline-block;
    }

（3）直接使用弹性布局flex
这里就不贴代码了，毕竟这么简单快捷的办法，不会还好意思说做前端的？哈哈哈哈

第二类<适合只知道子元素的宽（实现水平居中）或者高（实现垂直居中）或者两者都知道（水平垂直居中>

（1）使用绝对定位和margin（最简单通用的办法）

#container {
    position: relative;
}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
} 

（2）还是使用绝对定位，这个方法也没有用到子元素的宽高，但是就是要定义其宽高，不然left和right会决定他的宽，top和bottom决定他的高。
原理：通过配对设置top/bottom、left/right为0，再设置margin：auto即可

#container {
    position: relative;
}

#child {
    position: absolute;
    left: 0;  left和right配对出现控制水平方向
    right: 0;
    top: 0;   top和bottom配对出现控制垂直方向
    bottom: 0;
    margin: auto;
} 

这种方法只支持ie9+、ff、chrome等现代浏览器

第三类<这种方法只需要知道父元素的高即可，而且这对ie6、ie7有效>

原理：为父元素设置一个font-size值，其值为其高度除以1.14；再加上text-align：center。
为子元素设置inline/inline-block和vertical-align：middle即可

《这一类与设置display：table-cell这一种方法加起来就可以解决兼容性问题的垂直居中了》

第四类<只是实现一边居中的一些属性>
（1）/* 不用知道子元素父元素元素的宽高，不过只能水平居中 ****************************************/

#child {
    margin: 0 auto;}

（2）/* text-align:center;这个只能对图片文字按钮进行水平居中 ***************************/

（3）/* 将文字的line-height设置为父元素的高，可以实现垂直居中，不过只适合一行文字**********/