8种垂直居中的⽅法
⼋种垂直居中的⽅法
垂直居中的需求经常遇到，通过资料实践了⼋种垂直居中的⽅法。
以下的⽅法都围绕着该HTML展开
HTML代码
<div  class="wrap">
<div  class="box"></div>
</div>
CSS
⽅法1（常⽤）：display：flex
.wrap{
width:300px;
height:300px;
border: 1px solid red;
display:flex;
justify-content:center;
align-items:center;
}
.box{
height:100px;
width:100px
boder:1px solid blue;
}
⽅法2： table-cell
vertical-align 属性设置⼀个元素的垂直对齐⽅式。
该属性定义⾏内元素的基线相对于该元素所在⾏的基线的垂直对齐。允许指定负长度值和百分⽐值。这会使元素降低⽽不是升⾼。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐⽅式。
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box{
width: 100px;
height: 100px;
border: 1px solid blue;
css设置文字垂直居中display: inline-block;
}
⽅法3: margin，transform配合
.wrap{
width: 300px;
height: 300px;
background-color: pink;
/* border: 1px solid red; */
/*防⽌外边距塌陷。解决外边距塌陷的⽅法：
⽗元素加overflow:hidden或加上边框*/
overflow: hidden;
}
.box{
width: 100px;
height: 100px;
background-color: plum;
margin:50% auto;
transform:translateY(-50%);
}
⽅法4: inline-block+vertical-aligin
.wrap{
width: 300px;
height: 300px;
background-color: pink;
text-align: center;
line-height: 300px;
}
.box{
width: 100px;
height: 100px;
/* 重新设置⼦元素的⾏⾼，否则会继承⽗元素的⾏⾼*/
line-height: 100px;
background-color: plum;
display: inline-block;
/* middle  把此元素放置在⽗元素的中部。 */
vertical-align: middle;
}
⽅法5：absolute+负margin
.wrap{
width: 300px;
height: 300px;
position: relative;
background-color: plum;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
/
*宽⾼的⼀半*/
margin-left: -50px;
margin-top: -50px;
background-color: powderblue;
}
⽅法6 absolute+margin:auto
和⽅法5类似，当宽度和⾼度未知时使⽤
.wrap{
width: 300px;
height: 300px;
position: relative;
background-color: plum;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
bottom:0;
right:0;
margin:auto;
background-color: powderblue;
}
⽅法7：absolute+transform
与⽅法5类似
.wrap{
width: 300px;
height: 300px;
position: relative;
background-color: plum;
}
.box{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
background-color: powderblue;
}
⽅法8 强⼤的grid
.wrap{
width: 300px;
height: 300px;
display: grid;
background-color: plum;
}
.box{
width: 100px;
height: 100px;
align-self: center;
justify-self: center;
background-color: powderblue;
}

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