前言
写博客主要是用来总结、巩固知识点，加深自己对这个知识点的理解。同时希望能帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。
本来想把这个知识点放在这篇博客中讲的,但是这里涉及的内容还挺多的。于是就把它单独拉出来写了。
简单说明一下
下面的内容使用到了flex的布局方式。有关flex的详细使用方法和兼容性。这里就不详细讲述了，可以看这篇文章
这里讨论的是子元素为块级元素的水平垂直居中方案。其他行内元素的的方案可以看这大佬的文章16种方法实现水平居中垂直居中
宽高固定的元素如何进行垂直水平居中
1.使用绝对定位与负边距实现
html:
<div class="parent">
<div class="child"></div>
</div>
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两个属性来实现水平垂直居中，一个定义的是水平轴山上的对齐方式，另一个则定义的是垂直轴上的对齐方式。
详细代码在这里：github.com/Leo928/html…
以上部分内容参考自其它文章。可以点击链接查看原文。
最后：如果讲诉不当的地方。请在评论区指出。你们的支持，是我不断进步的源泉。
参考资料
