水平居中

父元素是块级盒子，已设定宽度

子元素是块级元素，没设定宽度，不存在居中
子元素是行内元素，父元素设置text-align:center
子元素是块级元素，以设定宽度：

1. 通过计算父元素的padding-left或padding-right或margin-left或margin-right，设定父元素和子元素box-sizing:border-box
2. 给子元素设置：margin:auto
3. 用定位position，子绝父相。父元素设置绝对定位position:relative，子元素设置相对定位position:absolute;left:50%;transform:translateX(-50%)
4. 弹性布局：父元素设置display:flex;flex-direction:row;justify-content:center

垂直居中

父元素是块级盒子

子元素是行内元素高度由内容撑开：

1. 单行，设定父元素line-height:为自己的高度
2. 多行，给父元素设置display:inline/inline-block/table-cell;vertical-align:middle

子元素是块级元素未设定高度：

1. 弹性布局：父元素设置display:flex;flex-direction:column;justify-content:center

子元素是块级元素已设定高度：

1. 计算子元素的margin-top或margin-bottom或padding-top或padding-bottom，设定父元素和子元素box-sizing:border-box
2. 用定位position，子绝父相。父元素设置绝对定位position:relative，子元素设置相对定位position:absolute;top:50%;ltransform:translateY(-50%)

垂直和水平同时居中

1. 用定位position，子绝父相。父元素设置绝对定位position:relative，子元素设置相对定位position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
2. 弹性布局：父元素设置display:flex;justify-content:center;align-items:center