让内容上下居中在布局时是经常写的，下面写了常见的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
以上四种上下居中方式,向父级元素里面添加元素时布局发生的改变会不一样,修改代码即可发现
版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创
