要实现这个布局有很多种方法，我经常用的是以下两种方式：
第一种方法:使用【绝对定位】
此方法要求父元素要有高度,父元素开启相对定位,子元素开启绝对定位.
注意:如果父元素没有高度也没有开启相对定位,则子元素会相对于body水平垂直居中.
第二种方法:使用【flex】布局
在flex布局中父元素是子元素的容器,子元素是父元素的项目.
容器里设置的属性都是对于项目来说的,
display:flex;代表容器里的所有项目按flex布局,
justify-content:center;容器里的所有项目水平居中
align-items:center;容器里的所有项目垂直居中
这里的父元素给不给高度都可以,父元素如果没有高度,默认是子元素高度(它会被子元素的高度撑起来).
注意：flex不支持IE9及以下浏览器。
