CSS实现元素水平垂直居中，是必需要掌握的知识，也是面试必考知识。我总结了7种方法，并且每种方法都配套了对应的应用场景案例。
知识概要：
1、行内元素水平垂直居中
2、绝对定位+margin
3、绝对定位+margin:auto
4、绝对定位+translate
5、flex布局
6、flex+margin:auto
7、table-cell
大家可以把内容收藏起来，慢慢消化。在以后的实战中多尝试不同的方法，尽可能把这些方法全部掌握。
CSS中实现div元素水平垂直居中的7个方法
1、行内元素水平垂直居中
方法一：文字水平垂直居中，父元素加上如下代码：
line-height:高度大小值;//垂直居中
text-align:center;//水平居中
这里要特别注意，这种方式并不能让图片相对文字在单行中垂直居中
方法二：图片相对文字在单行中垂直居中，在方法一基础上加上如下代码
vertical-align:middle;//图片与文字垂直居中，但会有少量偏差，再通过
position:relative;//通过相对定位微调元素位置
top:2px;//微调位置大小
2、绝对定位+margin（需要指定子元素的宽高）
方法一：给子元素加如下代码
position:absolute;
top:50%;
margin-top:-自身高度一半;
left:50%;
margin-left:-自身宽度一半;
不足之处：要求指定子元素的宽高，才能写出margin-top和margin-left的属性值。
方法二：给子元素加上如下代码
position:absolute;
margin:auto;
不足之处：要求指定子元素的宽高，如果不指定宽高，子元素将占满父容器
如果元素的宽高会随着内容发生变化，则以上两种方法都不能用，否则ok
3、绝对定位+translate（无需指定子元素的宽高，推荐）
这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为translate()中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的（动态计算宽高）。
给子元素加下如下代码
position:absolute;top:50%;left:50%;
transform:translate(-50%,-50%);向左和向上移动自身宽度一半
4、flex布局
方法一：给父元素加上如上代码
display:flex;//弹性布局
justify-content:center;//子元素相对父元素水平（主轴）居中
align-items:center;//子元素相对父元素垂直（交叉轴）居中
不足之处：父容器里的所有子元素们都垂直居中了。（如果父容器里有多个子元素的话，我们只想指定某个子元素居中，则可以用方法二。
方法二：给父元素和子元素分别加上如下代码
display:flex;//给父元素加，弹性布局
margin:auto;//给子元素加
5、table-cell布局
display:table-cell;指让标签元素以表格单元格的形式呈现，使元素类似于td标签。
不过会被float,position:absolute等属性破坏效果，应避免同时使用。
同时margin值是没有任何意义的
应用一：内容整体水平垂直居中
应用二：不等高项水平垂直居中
在应用一的基础上，给子项（元素）添加vertical-align:middle;就可以实现
应用三：单个块级元素水平垂直居中
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
PC端项目开发（1个）
移动WebApp开发（2个）
多端响应式开发（1个）
共4大完整的项目开发！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用Git进行项目代码的版本的管理，Markdown记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿到PC端，移动端，多端响应式开发项目开发
真机调试，云服务部署上线；
Linux环境下的Nginx部署，Nginx性能优化；
Gzip压缩，HTTPS加密协议，域名服务器备案，解析；
企业项目域名跳转的终极解决方案，多网站、多系统部署；
使用使用Git在线项目部署；
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路！
过程中任何费用和利益，非诚勿扰。