CSS：水平居中/垂直居中/水平垂直居中
一、水平方向居中
1、行内元素水平居中
如果父元素是块级元素，可直接给父元素设置 text-align:center,如果父元素不是块级元素，就把父元素设置为块级元素（如添加display:block），再给父元素设置 text-align:center
2、块元素水平居中
2.1 定宽和不定宽
2.1.1 父子元素定宽情况下：给需要居中的元素设置margin:0 auto
2.1.2 子元素不定宽情况下:默认子元素宽度和父元素一致，此时可以将子元素转化为行内块/行内元素，给父元素设置text-align:center,display:inline-block或display:inline,
2.2 使用定位，子绝父相
使用子绝父相（子元素绝对定位，父元素相对定位），设置子元素left:50%，使子元素左上角水平居中。可再用transform:translateX(-50%)，或者子元素定宽使用margin-left:-(子元素宽度一半)px
2.3 使用flex布局(不用考虑是否定宽)
给父元素添加属性display:flex,justify-content:center
二、垂直方向居中
1、行内元素垂直居中
1.1 单行行内元素
在父元素设置行高等于父元素高度即可line-height:父元素height
1.2 多行的行内元素
父元素设置display:table-cell和vertical-align:middle即可
(注：vertical-align和text-align一样只能用在父级是行内元素的情况下，但父级为什么不能用inline-block而要table-cell？因为inline-block本质和块元素差不多，只是允许同一行有多个块，而table-cell却是一个可以设置宽高的行内元素)
2、块元素垂直居中
2.1 使用定位，子绝父相
子绝父相（子元素绝对定位，父元素相对定位）,再使子元素top:50%左上角垂直居中，可在使用transform:translateY(50%)或margin-top:-(子元素高度一般)px
2.2 使用flex布局
给父元素添加display:flex和align-items:center即可
三、水平垂直都居中
1、已知高宽，子绝父相
1.1子绝父相（子元素绝对定位，父元素相对定位），在子元素设置top: 0,right: 0,bottom: 0,left: 0,margin: auto
1.2 子绝父相（子元素绝对定位，父元素相对定位），left: 50%,top: 50%,margin-left: -(元素宽度的一半)px,margin-top:-(元素高度的一半)px
2、不知子元素高宽
2.1 使用定位：子绝父相（子元素绝对定位，父元素相对定位），给子元素设置left: 50%,top: 50%,transform: translate(-50%,-50%)
2.2 使用flex布局，给父元素display:flex,justify-content:center,align-items: center
