div垂直居中的几种方法

第一种

1. 父类
.father { 
   
	height:100%; // height:100vh;
	width:100%;
	display:flex;
	background-color: red;
}
2. 子类
.child { 
   
	height:40%;
	width:50%;
	margin:auto;
	background-color: blue;
}

第二种

1. 父类
.father { 
   
	height: 100%;
    width: 100%;
    position: relative;
    background-color: #eee;
 }
2. 子类
 .child { 
   
	height: 40%;
    width: 50%;
    position: absolute;
    left: 25%;
    top: 30%;
    right: 0%;
    background-color: #5FD6FF;
 }

第三种

.father { 
   
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.child { 
   
    vertical-align: middle;
	display: inline;
}

第四种

1. 父类
#box { 
   
	line-height: 500px;
    height:500px;
	width:100%;
	text-align: center;
	background-color: #eee;
}
2. 子类
 #shade { 
   
	width: 200px;
    margin: auto;
 }