如题，垂直水平居中确实是前端老掉牙的问题了。。所以，直接po下几种实现，以此为记录~
以下全部实现都是基于css!!!!!!!js的以后另谈啦~
简单布局<div class='one'><div class='two'></div></div>
1. position+calc
比如，将two的style设置为position:relative;宽高设置为calc(50%-固定宽高1/2)。
这种方法主要缺点就是。。居中的元素只能是固定宽高。。伤不起啊。
2. 空元素..
这个就不怎么介绍了，原理就是用空元素占领前面的位置，之后需要居中的元素排在后面居中即可，一般不会用这样的实现方式的，所以省略~
3. 父元素padding
父元素padding实现居中也是通过calc作为辅助，设置父元素的padding为calc(50%-父子元素宽高差1/2)，同样是只能用于固定宽高。
需要注意一点是，box-sizing需要设置为border-box，不然padding会挤出你期望的宽高。
4. 子元素margin
子元素margin实现。需要注意一点是，子元素需要设置为inline-block，之后通过margin设置居中即可。
5. flex布局
flex实现只要3行属性即可实现居中，将one的style设置为display:flex;justify-content:center;align-items:center;就完成了。能够将宽高未知的元素也设置为居中了。
6. transform
transform实现居中同理也是适用于宽高未知的元素居中。主要css代码是.one{position:非static}.two{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}，大功告成。