有很多种方法，我给你列举几个实际情况中经常用的
对于具有inline属性的元素，可以设置行高与高相同，text-align设置为center即可
对于块级元素
①父元素为相对定位，想让绝对定位的元素水平垂直居中，可设置top left两个属性的值为50%，然后通过transform属性的translate(-50%, -50%)来达到水平垂直居中的效果
②对于没有相对于父级定位的元素，可以在设置margin:auto达到水平居中的前提下，给该元素这只相对定位，把top的值设为50%，再利用transform的translateY（-50%）同样也能达到视觉上的水平垂直居中效果
③就是对于想在一列展示块级元素水平垂直居中的方法，最方便的不需要用float设置浮动，这样会脱离文档流，需要通过定位去控制，浮动加定位的属性在一起是不建议的，所以对于这种情况可以将block块级元素的display设置为inline-block，在不损失块级元素的属性情况下，再利用第一种方法去设置垂直水平居中
这个就是弹性布局了，父级display设置flex，成为弹性容器，弹性子元素可根据实际需求进行不同效果的水平垂直居中
整体上有很多种方法达到水平垂直居中的效果，无外乎就是通过内外边距，定位，行高加文本居中的方式，前端的目的不是让元素确确实实居中了，而是用最优的方法在视觉效果上居中。
1. 设置 margin: 0 auto
单行文本垂直居中，通过设置行高为父元素高度（父元素高度已知）。
图片垂直居中，设置上下padding（父元素高估不设置）。
图片垂直居中，下边这种方法会有一定偏差（父元素高估不设置）。
图片垂直居中，图片作为背景。
1. 若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央。
行内元素可可以转换为inline-block实现居中。
