首先，我们来看下垂直居中：
（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document
（2）、如果元素是行内块级元素，一般会使用diaplay:inline-block,vertical-align:middle，还有一个伪元素让元素内容处于容器中央！给父元素添加伪元素！
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
（3）、通过display：flex来实现垂直居中；
父级：display：flex；
子元素：align-self：center；
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
（4）、使用display：table进行垂直居中！
给父元素设置display：table；子元素设置为display：table-cell;
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">ddddd
（5），已经知道父元素的高度，给子元素相对定位，在通过translaY（）得到垂直居中
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
6)、父元素高度不知道，同过transform实现，先给父元素相对定位，在给子元素绝对定位
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
二、水平居中：
（1）、行内元素方案，只要把行内元素包裹 在一个盒子中，并且在他父级元素添加如下属性：text-align：center；
Document
1111
（2）、单个块状元素解决方案：
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
3）、多个块状元素解决方案：父元素设置为text-align：center；子元素设置为：display：inline-block;
相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362
!DOCTYPE html> "en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">class="box3">
也可以使用flexbox来实现：
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">class="box3">class="box4">
（4）、不定宽度块元素水平居中：
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">
- 1111
- 111
- 111
三：实现水平+垂直居中，也就是在中央：（1）单行行内元素：父元素设置：text-align:center，display：table-cell;vertical-align:middle,在这里，图片，文字，都是一样的操作
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">"5.jpg" alt="">
文字在中央，还可以父级设置为text-align:center;line-height设置为父元素的height
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">1111
（2）对于单个块级元素，父元素设置为相对定位，子元素设置为绝对定位高度，宽度为50%
!DOCTYPE html> "en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
（3）、flex实现不定宽度水平+垂直居中
"en"> "UTF-8"> "viewport" content="width=device-width, initial-scale=1.0"> "X-UA-Compatible" content="ie=edge">Document class="box">class="box2">
推荐阅读：CSS边框长度控制
css样式的书写顺序及原理——很重要！
原文链接：https://blog.csdn.net/qq_35788269/article/details/80691114