htmlhr垂直居中，常见的CSS⽔平垂直居中设置让内容上下居中在布局时是经常写的，下⾯写了常见的4中上下居中⽅式，复制代码查看效果
css代码
*{
margin: 0;
padding: 0;
}
body{
padding:10px 50px;
}
.parent{
width: 400px;
height: 200px;
background: #b99eff;
}
.child{
width: 150px;
height: 100px;
background: #db6867;
}
/*flex⽔平居中和垂直居中*/
.flex-parent{
display: flex; /* 给⽗元素设值*/
justify-content: center; /* ⽔平居中 */
align-items: center; /*垂直居中*/
}
.flex-child{
}
/*table⽔平垂直居中*/
.table-parent{
display: table-cell;
text-align: center; /*⽔平居中*/
vertical-align: middle; /*垂直居中*/
}
.
table-child{
display: inline-block;
}
/*absolute+transform ⽔平垂直居中*/
.transform-parent{
position: relative;
}
.transform-child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*绝对定位⽅式+四个⽅向置0*/
.position-parent{
position:relative
}
.position-child{
margin:auto;
height: 100px;
width: 100px;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
html代码
flex⽔平居中和垂直居中
缺点：有兼容性问题
table⽔平垂直居中
absolute+transform ⽔平垂直居中
绝对定位⽅式+四个⽅向置0
css设置文字垂直居中
以上四种上下居中⽅式，向⽗级元素⾥⾯添加元素时布局发⽣的改变会不⼀样，修改代码即可发现版权声明：除特别注明外，本站所有⽂章均为⽥珊珊个⼈博客原创

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