CSS 水平垂直居中方法

定宽

1. text-align:center;
	line-height=height;

2. margin:0 auto;

3. 父级：{ position:relative; }
	   子级：{
				position:absolute;
				left:50%;
				top:50%;
				margin-left:-元素自身宽度的距离
				margin-top:-元素自身宽度的距离
			}
	
4. 父级：{ position:relative; }
	   子级：{
				position:absolute;
				top:calc(50% -元素自身宽度的距离);
				left:calc(50% - 元素自身宽度的距离);
				}

5. min-height: 100vh+flex+margin:auto

不定宽

1.父级：{ position:relative; }
	   子级：{
				position:absolute;
				left:50%;
				top:50%;
				transform:translate(-元素自身宽度的距离,-元素自身宽度的距离)
			}

2 .line-height=height

3. 父级 {
	    background-color: #FF8C00;
	    width: 300px;
	    height: 300px;
	    display: flex;//flex布局
	    justify-content: center;//使子项目水平居中
	    align-items: center;//使子项目垂直居中
	}
4.利用display：table 实行多行文本垂直居中(vertical-align属性只对行内元素有效，对块内元素无效)
   父级：{ 有高度 
			display:table;
		}
		子级：{
		display:table-cell;
		vertical-align:middle;
		}