一个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;
}