一、缘由
今天面试，面试官：“小伙子，说说居中的方式有哪些？”
哟，这不是我写的博客前端学习系列——（七）水平居中和垂直居中里的东西吗，巴拉巴拉讲了。
嗯，自我感觉还不错，应该没问题，内心窃喜。
面试官：“嗯，这些可以实现，但是都是比较旧的技术，你能说说一些的新的技术吗？”
此时，我的内心是懵逼的，表情是黑人问号的？还能怎么办，只能默默地低下头，假装可怜呗。。哈哈当然这是开玩笑的，不过确实也不知道，就老老实实说了，面试官也很和蔼，然后告诉我一些实现居中的新方法，这里讲一讲。给自己记记笔记，也分享给大家。
二、采用CSS3属性transform
<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;">
<div style="width:100px;height: 50px;transform:translate(-50%,-50%);position: relative;left: 50%;top: 50%;background-color: #0f0">居中</div>
</div>
效果图如下：
其实和我在前端学习系列——（七）水平居中和垂直居中第1.3节的内容思想类似，但是采用transform:translate(-50%,-50%)的方式，无论是固定高度，还是非固定高度，都能实现水平和垂直的居中。
相信基于此，大家也想到了修改前端学习系列——（七）水平居中和垂直居中第1.3节中固定宽高实现水平垂直居中的方法了，即下面的方式：
<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;">
<div style="width:100px;height: 50px;transform:translate(-50px,-25px);position: relative;left: 50%;top: 50%;background-color: #0f0">居中</div>
</div>
当然，大佬们如果想显得高大上一点，用啥轮子，自己来造，用matrix也行，效果是一样的，下面给出样式示例
<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;">
<div style="width:100px;height: 50px;transform:matrix(1,0,0,1,-50,-20);position: relative;left: 50%;top: 50%;background-color: #0f0">居中</div>
</div>
其中matrix的值必须是数值，不带单位，所以第一个好像也只能用translate的轮子了。
三、flexbox布局
上面的都太麻烦，何不考虑flexbox布局呢，简单好上手，实现效果跟上面的一样。
<!--最外面的div是模拟屏幕，不然不怎么好演示效果-->
<div style="width:300px;height: 100px;border: 1px solid #f00;display:flex;justify-content:center;align-items: center;">
<div style="width:100px;height: 50px;background-color: #0f0">居中</div>
</div>
四、总结
是不是感觉思路又多了少许啊，不过CSS3和flexbox的支持不是非常好，所以会使用一些hack代码，反而增加了负担，在实际应用中可能老办法反而用的多。所以啊，还是得套一句粗鄙的话“大爷终究还是大爷”，老办法总是万金油的，哈哈。
本文到此结束，如有问题，欢迎一起讨论。