⼦元素div 在⽗元素中垂直⽔平居中的⽅法总结
⼦元素div 在⽗元素中垂直⽔平居中的⽅法总结基本HTML 结构如下:
第⼀种⽅法:
第⼆种⽅法:<
body >    <div class ="father ">
<div class ="son "></div >
</div >
</body >
⽗元素设置
position: relative;
⼦元素设置
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
⼦绝⽗相，⼦元素top 、left 设置为50%，⼦元素margin 的top 、left 减去⾃⾝⾼和宽的⼀半。 .father {
width: 600px;
height: 600px;
background-color: skyblue;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: chocolate;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
第三种⽅法:
⽗元素设置
position: relative;
⼦元素设置
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
⼦绝⽗相，将⼦元素的top 、right 、bottom 、
left 均设为0，然后设置⼦元素 margin: auto .father {
width: 600px;
height: 600px;
background-color: skyblue;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: chocolate;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
⽗元素设置
display: table-cell;
vertical-align: middle;
⼦元素设置
margin: auto;
这种⽅式是让所有的⼦元素作为⼀个整体垂直居中，并不能单独指定某⼀个⼦元素居中。
第四种⽅法：第五种⽅法:.father {
width: 600px;
height: 600px;    background-color: skyblue;
display: table-cell;
vertical-align: middle;
}
.son {div中的div居中
width: 200px;
height: 200px;
background-color: chocolate;
margin: auto;
}
⼦元素设置
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
⼦元素相对定位，top 、left 设为50%，transform: translate(-50%, -50%);
这种⽅式不会导致⼦元素脱离⽂档流(标准流)，即⼦元素在⽂档流中仍然占据位置。.father {
width: 600px;
height: 600px;
background-color: skyblue;
}
.son {
width: 200px;
height: 200px;
background-color: chocolate;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
第六种⽅法:
⽗元素设置
position: relative;
⼦元素设置
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
⼦绝⽗相，top 、left 设为50%，transform: translate(-50%, -50%);
这种⽅式导致⼦元素不再在⽂档流(标准流)
中占据位置，即脱离⽂档流。.father {
width: 600px;
height: 600px;
background-color: skyblue;
position: relative;
}
.son {
width: 200px;
height: 200px;
background-color: chocolate;
position: absolute;
top: 50%;    left: 50%;
transform: translate(-50%, -50%);
}
⽗元素设置
display: flex;
justify-content: center;
align-items: center;
这种⽅式让所有的⼦元素作为⼀个整体居中。
.father {
width: 600px;
height: 600px;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
}
.son {
width: 200px;
height: 200px;
background-color: chocolate;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。