水平居中:
在父元素上text-algin:center和margin:0 auto;可分别设置子元素为inline和block元素。
垂直居中:
万能:子元素使用子元素使用绝对定位;
子元素为inline: 则设置text-height和父元素一样高;
子元素为block:
1.margin-top(需要给父元素添加padding/border/overflow防止父元素一起被带下来);
2. 1)首先需要将父元素样式设置position:relative;
2)将子元素样式设置position:absolute;
3)将left/top/bottom/right:0;
4)margin:auto;
3.弹性盒子布局
#father{ display: flex; justify-content: center; align-items: center; }
宽高 | padding | margin | |
inline | 无效 | 有效 | 左右有效 |
inline-block | 有效 | 有效 | 有效 |
block | 有效 | 有效 | 有效 |