1.水平居中
//我开始写的时候都没注意，这一条是水平居中，垂直不改变
-
行内元素 text-align:center
-
块级元素 margin :0 auto
-
absolute+transform
-
flex+justify-content:center
1.text-align：center只对行级元素有用
当然这个元素应该用在父级上，对他的子元素中的行级元素起作用，其实可以根据单词的意思来理解，是文本对齐的意思，也就是指其中的文本的位置
//// 开始我以为是设置在行级元素上的，后来一想，行级元素的宽高都不能设置，谈何居中
2.块级元素 margin:0 auto;
这是专门针对块级元素的居中，但是是限制一个块级元素的居中
2.垂直居中
-
line-height:height
设置行高让元素里面的内容居中 -
vertical-align:middle
想复杂了，还有一种最直接垂直居中的属性
但是这个属性很多时候你用的时候可能都不会起作用，参看大佬作品
彻底搞定vertical-align垂直居中不起作用疑难杂症
3.水平垂直居中
之前看到的都是某一个方向上的居中，这里是设置局正中
- position+transform
首先就想到了定位，position：abolute;left:50%,top:50%
这样写确实是居中，但是你仔细看发现还是有一点偏移的，因为这个居中是元素的左上角局于最中间，而真正的居中应该是元素的中心居最中间
仔细看这张图，红色就是我开始只设置了position的元素，绿色在红色的基础上添加了transform:translate(-50%,-50%),向左移动了半个元素的长度
以上是我常用的一些属性，还有一些属性也可以有这样的作用，但是我很少用，等以后仔细学习了再补充吧
放一些学习链接
浅谈CSS3中display属性的Flex布局