前言
写博客主要是用来总结、巩固知识点，加深自己对这个知识点的理解。同时希望能帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。
本来想把这个知识点放在,但是这里涉及的内容还挺多的。于是就把它单独拉出来写了。
简单说明一下
下面的内容使用到了flex的布局方式。有关flex的详细使用方法和兼容性。这里就不详细讲述了，可以看
这里讨论的是子元素为块级元素的水平垂直居中方案。其他行内元素的的方案可以看这大佬的文章
宽高固定的元素如何进行垂直水平居中
1.使用绝对定位与负边距实现
html:
复制代码
css:
.parent { position: relative; width: 600px; height: 600px; margin: auto; border: 1px solid red; }.child { position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; width: 100px; height: 100px; border: 1px solid blue; }复制代码 原理：这个的实现方法原理还是很好理解的。相对父元素定位，距上边和左边个一半，然后在减去子元素的一半。
2.绝对定位与margin:auto实现水平垂直居中
css:
.parent { position: relative; width: 600px; height: 600px; margin: auto; border: 1px solid red;}.child { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 100px; height: 100px; border: 1px solid blue;}复制代码 原理：这个方法的实现原理看了张鑫旭大神的博客自己还是一直半解的。如果有同学知道可以在评论区探讨下。
未知宽高的元素如何进行水平垂直居中
1.无所不能的css3来实现
css:
.parent { position: relative; width: 600px; height: 600px; margin: auto; border: 1px solid red; }.child { position: absolute; width: 100px; height: 100px; border: 1px solid blue; } .method3 { top: 50%; left: 50%; transform: translate(-50%, -50%); }复制代码 原理：这种方法的实现原理其实跟固定宽高的方法一是一样的。但是他有一个有点就是不需要知道元素的宽高。主要是通过transform中translate偏移的百分比值是相对于自身大小的。所以就可以实现不知道宽高还是可以实现垂直水平居中。
2.flex实现水平垂直居中
css:
.parent { display: flex; justify-content: center; align-items: center; width: 600px; height: 600px; margin: auto; border: 1px solid red;}.child { width: 100px; height: 100px; border: 1px solid blue;}复制代码 原理：通过justify-content和align-items两个属性来实现水平垂直居中，一个定义的是水平轴山上的对齐方式，另一个则定义的是垂直轴上的对齐方式。
详细代码在这里：
以上部分内容参考自其它文章。可以点击链接查看原文。
最后：如果讲诉不当的地方。请在评论区指出。你们的支持，是我不断进步的源泉。
参考资料