⽗⼦div元素⽔平垂直居中的七种⽅法
效果样式图如下:
⽅法⼀：利⽤定位和transform的⽅法来进⾏居中
说明：⾸先利⽤定位中的⼦元素绝对定位和⽗元素相对定位的⽅法来,top:50% 和left:50%会使⼦元素在⽗元素中向下移动250px，向右移动250px,⼦元素因⾃⾝有⾼度和宽度，这会导致⼦元素不能完全居中
的情况,transform中的translate属性可以使⼦元素以⾃⾝为中⼼向上移动和向左移动分别⾃⾝的⾼度，以达到垂直⽔平居中的效果
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⽅法⼆：计算⽔平垂直居中的距离来定位元素
说明:⽅法⼆与⽅法⼀不同之处在于需计算⼦元素和⽗元素的距离，通过⾼度和宽度可知⼦元素需要向下和向右移动150px，利⽤30%
(150px/500px)来进⾏定位，当然可以利⽤top和left:150px也可以⽔平垂直居中
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 30%;
left: 30%;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
⽅法三：利⽤外边距margin设置数值和top⽅法
说明: 与⽅法⼀不同之处在于利⽤外边距来移动⼦元素的位置,margin-top和margin-left的值分别为⼦元素⾃⾝⾼度和宽度的⼀半的负值<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⽅法四：利⽤top和margin为auto的⽅法
说明：当分别将top,bottom,left,right设置为0时,⼦元素因⾃⾝的宽度和⾼度不⾜，会在⽗元素上的初始位置显⽰，但设置margin为auto，会分别将⼦元素在⽗元素中的边距设置为⽔平垂直居中的距离
background-color: antiquewhite;
position: relative;div中的div居中
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⽅法五：利⽤flex布局的⽅法(建议使⽤)
说明：当将box1设置为弹性盒⼦时,box2就会脱离⽂档流.利⽤justify-content和align-items设置为center就可以⽔平垂直居中.flex布局⽆需计算居中时的距离
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⽅法六：隔离⽗⼦元素来设置边距margin
说明：在单独给box2设置边距的情况下，会出现边距重叠的问题.可以利⽤box1前⾯添加⼀个空table来分离box1和box2，这样就可以单独给⼦元素box2设置外边距来达到垂直⽔平居中的效果.
background-color: antiquewhite;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
margin-top: 150px;
margin-left: 150px;
}
.box1::before{
content:"";
display: table;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
⽅法七：将⽗元素转化为table-cell类型
说明：将⽗元素box1转化为table-cell类型，并设置vertical-align为居中状态可以达到⽔平居中的效果.如果⼦元素为div等块级元素需转化为inline-block类型，设置text-align为居中状态可以达到垂直居中的效果
<style>
.box1{
width: 500px;
height: 500px;
background-color: antiquewhite;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.box2{
width: 200px;
height: 200px;
background-color: aquamarine;
display: inline-block;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>

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