一，已知宽高

 1         <style>

 2             #box {

 3                 height: 400px;

 4                 width: 400px;

 5                 border: 1px solid grey;

 6                 position: relative;

 7             }

 8             .son {

 9                 height: 300px;

10                 width: 300px;

11                 border: 1px solid grey;15

16

17             }

18         </style>

19     </head>

20     <body>

21         <div id="box">

22             <div class="son">

23                 已知宽高

24             </div>

25         </div>

26     </body>

1. (absolute+负maigin)

1 position: absolute;

2 top: 50%;

3 left: 50%;

4 margin-top: -150px;

5 margin-left: -150px;

2. (absolute+maigin:auto)

1 position: absolute;

2 top: 0;

3 left: 0;

4 right: 0;

5 bottom: 0;

6 margin: auto;

3.（absolute+calc）

　　这里的50%是父元素宽高的50%

1 position: absolute;

2 top:calc(50% - 150px);

3 left:calc(50% - 150px);

4 （父元素display：flex；子元素：margin: auto）

1 #box {

2         display: flex;

3    }

4 .son {

5       margin: auto;

6 }

二、未知宽高

1，absolute+transform（依赖translate 2d的兼容性）

1 position:absolute;

2 top:50%;

3 left:50%;

4 transform:translate(-50%,-50%);

2，利用flex布局

#box {

    display: flex;

    align-items: center;

    justify-content: center;

}

css实现水平垂直居中的几种方法的更多相关文章

  1. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  2. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  3. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

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

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

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

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

  6. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  7. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  8. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  10. 如何将一个div水平垂直居中？4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. squad经验总结

    啊美丽卡:M1A2 - TANKM2A3 - BLDL/M2A3M1126 - SCKMATV - RWS(电摇),ZCC(手摇)MATV(TOW) - TOW车M989 - 补给卡/运兵卡 俄军 8 ...

  2. Windows安装使用Chocolatey 包软件管理(类似 rpm , yum, brew , apt-get 包管理器工具)

    Windows也能像Linux或者Mac那样命令行安装管理软件了,,,真的太方便了 下载安装 使用window powershell 用管理员运行 Set-ExecutionPolicy Bypass ...

  3. 【Access】清空数据并重置自增主键

    DELETE FROM tasks ALTER TABLE tasks ALTER COLUMN id COUNTER(1,1)

  4. tuxedo 12c 安装

    tuxedo12c 安装命令 静默安装 控制台安装 tuxedo版本介绍 Tuxedo Release Name Tuxedo Release Number Note which contains L ...

  5. Caused by: java.lang.NoClassDefFoundError: net/minidev/asm/FieldFilter 报错的解决

    Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'r ...

  6. 通过Dnsmasq自建干净的DNS服务

    不晓得为撒,用网上的一些公共DNS服务的时候,总是莫名其妙的有些网站无法解析,有时候114能解析,阿里DNS不行或者腾讯DNS不行,导致总是来回切换DNS,很是烦心. 于是就想着自己搭建一个DNS服务 ...

  7. JDK8：Lambda表达式操作List集合

    JDK8的流对list的处理提供了很大的方便,特别是做报表的时候才能真正体现出来这个功能的强大:结合日常使用过程,有两个体会:一个是减少了数据库连接,最忌讳在循环中进行数据查询,特别是嵌套多层循环的时 ...

  8. Python学习笔记--高阶技巧

    闭包(避免全局变量被修改的风险) 函数的嵌套的利用 若是只是调用到外部函数的值,只需要用到函数的嵌套,具体实现如下: 若是要对外部函数的值进行修改,需要用到nonlocal关键字,具体实现如下: at ...

  9. Python学习笔记--PySpark的相关基础学习（一）

    PySpark包的下载 下载PySpark第三方包: 构建PySpark的执行环境入口对象 PySpark的编程模型 数据输入 对于SparkContext对象里面的成员方法parallelize,支 ...

  10. Github账户的注册

    注册步骤 首先进入github官网界面(注意,只能用Chrome或者Firefox浏览器.这样保险性更强一些) 官网地址:https://github.com/ 映入眼帘的界面是这样的: 点击右上角的 ...