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

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

（一）宽高确定

初始条件如下：

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

CSS水平垂直居中！的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  4. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  5. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  6. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  8. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  9. 介绍一种css水平垂直居中的方法（非常好用！）

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  10. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

  1. ue4 staticMesh属性记录

    Light Map Resolution 光照贴图分辨率 Generate Mesh Distancde Field 生成网格距离场(一种不怎么消耗性能的阴影) http://api.unrealen ...

  2. 第31月第17天 resolveInstanceMethod

    1. #import "UIView+Test.h" #import <objc/runtime.h> @implementation UIView (Test) + ...

  3. Thunar 通过快捷键在当前文件夹打开终端

    参考『Keyboard shortcut for open terminal here in thunar』\(^{[1]}\) 在 ganiserb/thunar-terminal 下载脚本. 将脚 ...

  4. Centos 上部署 tomcat7

     在 Centos 上部署 tomcat7 搜索tomcat,选下面红色框框的官网 选箭头指着的版本7, 选 tar.gz 格式, 下载完压缩包,使用 ftpx 工具,放在 centos 的 /opt ...

  5. vue.js学习系列-第一篇(代码)

    <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> ...

  6. zabbix3.2自动发现批量监控redis端口状态

    使用nmap提示被防火墙阻挡,实际没有启用防火墙 [root@eus_chinasoft_haproxy:/usr/local/aegis]# nmap 172.20.103.202 -p 7000 ...

  7. cocos2dx-lua http请求下载图片，使用XMLHttpRequest类

    HttpFileDownLoadSimple.lua local downloader = {} --数据拆分,以没1024*5字节拆成一段,打包写入文件 (拆完再拼接,转成字符串) local fu ...

  8. cocos2dx-lua调用C++

    文参考:https://www.cnblogs.com/xiaonanxia/p/4987856.html 上面的文章是IOS版教程,用4部分说明原理,1部分说操作步骤. 这里用window VS20 ...

  9. 操作Excel

    1.成面积计算(比如一块区域的数据统一除1000) (1).选一个空格单元格输入公式 回车 (2).复制改单元格 >选中所有要计算的面积 >右键 >选择性粘贴 >选择数值 &g ...

  10. char和unsigned char--数据类型区别

    char和unsigned char --数据类型区别 除去布尔型和扩展的字符型之外,其它整型可以划分为带符号的(signed)和无符号的(unsigned)两种. 类型int.short.long和 ...