块元素实现水平垂直居中

flex

绝对定位+margin（需要知道固定宽高）

绿色框内是绝对定位，那红色框的margin有什么含义呢？首先我们回顾一下绝对定位，移动基点为左上角，所以我们的第一步只是将item的左上角移到了父元素的中间，而他本身还未居中，他的中心点离他的左上角，相差了他本身宽高的一半，所以我们用margin移动过去。

绝对定位+transform

使用transform: translate(-50%,-50%);可以解决不知道item宽高或者item宽高不固定的问题。

不使用css3和flex（需要知道固定宽高）

我们使用绝对定位，每条边都使用相同的力气拉item，item就相当于被架在中间，这样也能实现居中效果。需要注意的是，div中添加图片的话，图片宽高要和div宽高保持一致。

行内元素实现水平垂直居中

text-align+line-height（只适用单行文本）

line-height=盒子的height能实现单行文字垂直居中，但是对多行文字失效，需要注意的是text-align+line-height是对父元素设置，不是对文本设置。

text-align+padding（不固定高度）

该方法只适用于没有固定高度的文本，使用padding，让四周的边距变得一样，就自然居中了。

table

父元素和子元素的table（固定高度）

根据table方法的原理，我们对父元素使用（text-align: center;display: table;），对子元素使用（display: table-cell;vertical-align: middle;）也能实现多行文本居中效果。table中默认vertical-align: middle;。