水平居中
默认html:
<div class="parent"><div class="child">child</div></div>
默认css:
.parent{width: 400px;height: 80px;line-height: 80px;background: #ccc; }.child{width: 80px;height: inherit;color: #fff;background: #000;}
图示：
水平居中：
① 使用inline-block + text-align
使用text-align可以使内联标签、内联块的标签进行水平居中，那么我们就可以在子级child从块级标签变成内联块便签，在其父级使用text-align进行水平居中即可，代码添加如下：
.parent{text-align: center;}.child{display: inline-block;}
图示：
② 使用table + margin
子级使用table让其具有表格块级元素的特性，此时可以通过margin左右auto的特性，将其水平居中代码如下：
.child{5display: table;margin: 0 auto; }
图示：
③ 使用相对定位和绝对定位position + transform
父级使用relative相对定位，子级child使用absolution相对父级进行绝对定位，然后子级通过left50%，将其最左边定位到父级的中间部位，然后通过transform中的translateX为-50%，将其中心定位到父级的中心部分代码如下：
.parent{position: relative;}.child{position: absolute;left: 50%;-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%); transform: translateX(-50%); }
图示：
④ 使用flex + justify-content
将父级内部元素的布局更改为flex布局,并且通过justify-content约束内部元素为水平居中，代码如下：
.parent{display: flex;justify-content: center;}
当然也可以使用flex + margin也是可以进行水平居中的，代码如下：
.parent{display: flex;/* justify-content: center; */}.child{margin: 0 auto;}
两种都可以将内部元素进行水平居中，图示：
垂直居中
默认html:
<div class="parent"><div class="child">child</div></div>
默认css:
.parent{width: 80px;height: 400px;background: #ccc; }.child{width: inherit;height: 80px;color: #fff;background: #000;}
图示：
垂直居中：
① 使用table-cell + vertical-align
同理使用表格格元素的特性代码如下：
.parent{display: table-cell;vertical-align: middle;}
图示：
② 使用相对定位决定定位position + transform
同水平居中的原理一下，配合position和transform的自身偏移即可完成代码如下：
.parent{position: relative;}.child{position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%); transform: translateY(-50%); }
③ 使用flex定位flex + align-items
父级使用flex布局配合align-items实现内部元素垂直居中代码如下：
.parent{display: flex;align-items: center;}
同理flex布局可以使用margin：
.parent{display: flex;/* align-items: center; */}.child{margin: auto 0;}
两种方法都可以是元素垂直居中
图示：
水平垂直居中
默认html：
<div class="parent"><div class="child">child</div></div>
默认css：
.parent{width: 400px;height: 400px;background: #ccc;}.child{width: 80px;height: 80px;line-height: 80px;text-align: center;color: #fff;background: #000;}
图示：
水平垂直居中：
①inline-block + text-align + table-cell + vertical-align
根据利用单元格特性的思路就是结合水平居中的inline-block + text-align和垂直居中的table-cell + vertical-align代码如下：
.parent{display: table-cell;vertical-align: middle;text-align: center;}.child{display: inline-block; }
图示：
② 使用相对和绝对定位position + transform
同样综合了水平居中和垂直居中的position + transform代码如下：
.parent{position: relative;}.child{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
原理不需多讲，就是全局top和left让内部元素的左上角对准父级的中心，然后自身通过translate进行内部偏移，图示就如上一张一样；
③ 使用相对和绝对定位position + margin偏移
结合父级相对定位，子级绝对定位，通过top/left/right/bottom都为0进行上下左右拉伸，最好通过margin为auto的约束元素到父级的中心，具体看代码：
.parent{position: relative;}.child{position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto; }
④ 使用flex布局中的justify-content + algn-items
关于对flex布局不是很了解的可以看这篇文章 flex布局总结，那么我们直接看代码：
.parent{display: flex;justify-content: center;align-items: center;}
结语
关于对水平居中、垂直居中、水平垂直居中的方法总结就到这里，不难看出方法都是万变不离其宗，整体下来很多都是差不多的，好了，如有错误，欢迎指正，小弟承蒙各位大佬的意见~
