css居中方法
水平居中
- 内联:爸爸身上写 text-align:center;
- 块级:
- margin-left: auto; margin-right: auto;
- display:flex
垂直居中
七种方式实现垂直居中
1.table自带功能
2.100% 高度的 afrer before 加上 inline block
3.div 装成 table
4.margin-top -50%
5. translate -50%
6. absolute margin auto
7. flex
.parent{
dispaly:flex;
justify-content: center;
align-item: center;
}
如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
如果 .parent 的 height 写死了,就很难把 .child 居中。
忠告:能不写 height 就千万别写 height。
网友评论