最近一直在面试,所以最近打算写一些前端面试的总结和必考的知识点,方便他人娱乐自己。
NO1.各种居中布局
水平居中
1、text-align:center
父元素为块元素时子元素无论是块元素还是行元素都可以实现居中,当父元素为行元素时则失效,转换为inlin-block并设定宽度就可以了,低版本IE下貌似不好使。
|
|
2、 margin:0 auto;
元素必须为display:block,而且必须有宽度。
|
|
3、position:absolute;left:50%;margin-left:-width/2(已知宽度);
|
|
4、相对浮动(宽度未知)
5、display:flex;justify-content:center;(css3弹性盒模型)
|
|
6、display:table;text-align:center;方法可以实现。
|
|
垂直居中
1、position:absolute;top:50%;margin-top:-height/2;(已知高度)
|
|
2、display:flex;items-align:center;父容器必须有高度(IE10以上支持,Safari支持-webkit-前缀的)
|
|
3、display:table-cell;vertical-align:middle;
|
|
4、单行内容居中line-height;
|
|