总结一下,最经典的面试题

分两种情况,宽高确定和不定宽高

(一)宽高确定

初始条件如下:

1. 绝对定位 + 负margin

  

  里面的盒子相对于父盒子绝对定位,距离上面和左边分别为50%,此处的50%是相对于父元素的高和宽,

  然后通过margin-left  和 margin-top 设置为负值,使元素向左向上移动自己的尺寸的一半,让其中心与父盒子中心重合

这种方法缺点是子元素的宽高必须已知,兼容性还可以

2. 绝对定位 + margin:auto

通过绝对定位设置四个方向值为0,此时子元素在父元素左上角,再设置margin: auto 各个方向自动居中

缺点: 必须已知子元素宽高

3.绝对定位 + calc 计算

    calc 计算属性是CSS3 提出的, 所以该方法需要兼容 calc

(二)不定宽高 垂直居中

1. 绝对定位 + transform

 translate 是使元素相对于 X(向右),Y(向下) 方向偏移,百分数是相对于自身的尺寸,要支持transform 2D

2. table-cell 布局

 普通元素变为table的现实效果, 注意子元素设置行内块

3. flex 布局

只需父元素设置 即可,兼容性 移动端较好,

另外还有网格布局,原始table,writting-model, inline-block 方式没有列举,因为不常用,我觉得只要掌握以上几种就可以了

总结: PC 端有兼容性要求,宽高固定, 使用 绝对定位+负margin

    PC端有兼容性要求,宽高不固定,使用table-cell布局

PC端无兼容性要求,使用flex

   移动端使用flex

最新文章

  1. android 双缓存机制
  2. js获取项目根目录的方法
  3. java 27 - 3 反射之 通过反射获取构造方法并使用
  4. adb 的相关操作及遇到的问题
  5. js django 数据互动
  6. 1004 Anagrams by Stack
  7. Spark源码阅读@ListenerBus 的实现
  8. C# 语言规范_版本5.0 (第6章 转换)
  9. Spring Boot 之构建Hello Word项目
  10. 自家服务器防止DDoS攻击的简单方法
  11. 【dp】合唱队形
  12. 什么是一致性Hash算法?
  13. mvc 路由伪静态实现
  14. webpack打包生成多个vendor的配置方法
  15. Heartbleed心脏出血漏洞原理分析
  16. 强制清除 gradle 依赖缓存
  17. java web,从零开始,一步一步配置ssm(Spring+SpringMVC+MyBatis)框架
  18. webstrom 安装Babel
  19. [leetcode]428. Serialize and Deserialize N-ary Tree序列化与反序列化N叉树
  20. 使用phpstorm+wamp实现php代码实时调试审计

热门文章

  1. Android 播放电影时滑动屏幕调整屏幕亮度(转)
  2. webrtc第一篇
  3. 黄聪:WordPress: 使用 wp_insert_attachment 上传附件
  4. GsonWithoutObject 没有对象(脱离对象) 直接提取 ... gson json
  5. installation and configuration of OpenCV4Android SDK
  6. HDU 5832 A water problem (带坑水题)
  7. vsftp实现ftps加密传输数据
  8. mysql 字符集设置查看
  9. c#安全性、稳定性、高性能需要注重的点
  10. java学习进制转换之查表法
  11. Ajax的工作流程简述
  12. [LeetCode] Second Minimum Node In a Binary Tree 二叉树中第二小的结点
  13. numpy教程:矩阵matrix及其运算
  14. 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能
  15. Speech and Booth Demo in Maker Faire Shenzhen 2018
  16. maven配置私服
  17. 174. Dungeon Game(动态规划)
  18. mongodb 怎样检测 安装成功 以及mongodb的一些增删改查命令
  19. .net C# Sql数据库SQLHelper类
  20. CSS动画实例