设置元素水平和垂直同时居中的几种方法

先来说说块级元素

第一种方法：
1、给元素一个定宽，再用margin：0 auto；让元素水平居中
2、设置元素position: relative;相对定位，top：50%，再设置 transform: translateY(-50%);让元素垂直居中。
说说这种方法的原理：
水平定宽居中大家已经熟知了吧，就是设置左右为自适应，就可以居中了，垂直上先设置相当到位距离顶部50%，但是这个是以元素上边框为标准的，不是以元素中心线为标准的，就会让元素向下多移动自身高度的一半，此时设置 transform: translateY(-50%);就是让元素在y轴上位移自身高度的一半，正值是向下，负值是向上，然后元素就居中了，而且是自适应居中，改变元素大小和父元素大小都不影响

第二种方法：
给需要居中的元素的父元素设置display：flix；再设置justify-content: center;就会让其子元素水平居中
再设置 position+transform方法让元素垂直居中就好了

第三种方法最为简单粗暴：
设置元素position+transform就能达到垂直和水平全部居中了，具体操作听我细说：
1、设置position: relative; top：50%；left：50%，这时元素是以上边框和左边框为中心居中的，所以上下和左右都会便宜自身高宽的一半。
2、再设置 transform: translate(-50%, -50%);这样就会让元素X轴和Y轴同时移动自身高宽的一半，就能达到上下左右都居中的效果

再来说说文本元素：

文本元素相对来说简单很多，只要在父元素设置text-align: center;就会水平居中
再设置元素自身行高 line-height 的值给父元素的高度就能垂直居中了

这就是我常用的居中方式，还有别的方式我用的很少就不说了，听没听懂都点个赞吧