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

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

方法1：

通过设置子元素绝对定位和margin:auto

.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：

设置父元素为弹性盒模型display:flex;
然后设置属性justify-content:center; align-items:center;
Q：简单方便，但是 子标签只能存在1个。

.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：

设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小
问题点：在全屏居中且屏幕大小会改变时有误差

.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;
}