【CSS】一个div在另外一个div中居中显示（水平居中，竖直居中）

方法1：

.parent {
		position:relative;
		width:800px;
		height:500px;
		border:2px solid #000;          
}

.child {
		position: absolute;
		width:200px;
		height:200px;
		margin: auto;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: red;
}

方法2：

.parent {
		width:800px;
		height:500px;
		border:2px solid #000;
		display:flex;
		justify-content:center;
		align-items:center;
}

.child {
		width:200px;
		height:200px;
		background-color: red;
}

方法3：

.parent {
		width:800px;
		height:500px;
		border:2px solid #000;
		position:relative;
}

.child {
		width:300px;
		height:200px;
		margin:auto;
		position:absolute;
		left:50%;
		top:50%;
		margin-left: -150px;
		margin-top:-100px;
		background-color: red;
}