css实现水平垂直居中的问题

面试已经被问了好几遍这个问题了，以为自己看了文字描述觉得挺简单的，但是，，，事实是总也记不住，还是自己敲一遍代码吧。

首先html结构如下图所示：

方式主要有以下几种：（显示效果放在最后了）

1、利用flex布局：justify-content：center使flex-item在主轴方向上居中，align-items：center使item在交叉轴方向上居中。

具体flex的其他属性值可参考http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。

          

2、利用table布局（下图中蓝色背景为内层的table-cell）：

           1）外层设置display:table

           2）内层设置display:table-cell

           3）内层设置vertical-align：middle可使table-cell的内容垂直居中，margin:auto使水平居中。

（其中，margin:auto可以实现居中，若一侧为定值，一侧为auto，则auto为剩余空间的大小；若两侧都为auto，则平分剩余空间）

                   

3、利用负position:absolute和 负margin：

           1）设置div的position:absolute

           2）向右向下移动50%浏览器的宽度（注意，此时移动到屏幕中心的位置是div的左上角）left:50%;top:50%

           3）所以再把div向上向左分别移动div本身高度和宽度的一半长度。margin-left:-100px;margin-top:-100px;

4、在3的基础上将负margin改为利用transform(-50%,-50%)实现移动。（其中，参数是自己宽高的50%）