css 实现垂直居中的几种方式
- 行内元素
.parent {
height: 高度;
}
.son {
line-height: 高度;
}
- table
.parent {
display: table;
}
.son {
display: table-cell;
vertical-align: middle;
}
- flex
.parent {
display: flex;
align-items: center;
}
- 绝对定位定高
.son {
position: absolute;
top: 50%;
height: 高度;
margin-top: -0.5高度;
}
- 绝对定位不定高
.son {
position: absolute;
top: 50%;
transform: translate( 0, -50%);
}
- top/bottom: 0;
.son {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/1542/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。
THE END
二维码
海报
css 实现垂直居中的几种方式
css 实现垂直居中的几种方式
共有 0 条评论