一，已知宽高

 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. 论 C++、C语言中指针的实用价值（一）

    指针的价值在于哪里?单纯为了迷惑别人?其实并非如此.本系列长期总结一些必须用指针或者用指针很好的场合: 写任何的代码都必须有一定的动机.而不是想怎么写就怎么写 写代码不是纯灵感的行为.也不是纯机械的行 ...

  2. spacy词向量

    spaCy能够比较两个对象,并预测它们的相似程度. 预测相似性对于构建推荐系统或标记重复项很有用. 例如,您可以建议与当前正在查看的用户内容相似的用户内容,或者将支持凭单标记为与现有内容非常相似的副本 ...

  3. jQuery.extend 函数详解(转)

    地址:http://www.jb51.net/article/29591.htm JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些 ...

  4. H. Permutation Counting 判环，计数，拓扑

    H. Permutation Counting 2022/7/28 传送门:https://codeforces.com/group/5zHJ4CTyoU/contest/392060/problem ...

  5. 什么是互联网控制消息协议ICMP 以及如何作为网络分析利器

    什么是互联网控制消息协议(ICMP) Internet控制消息协议(ICMP)是网络设备用来诊断网络通信问题的网络层协议.ICMP主要用于确定数据是否及时到达其预期目的地.通常,ICMP协议用于网络设 ...

  6. Konga-Kong网关的权限控制指定消费者

    刚开始陷入了误区了,网上很多参考例子都是如何实现身份证验证,而且看到konga上面配置身份插件的地方基本都有consumer一个配置项,一直纠结在这个如何通过key-auth实现指定的route或者s ...

  7. 截取屏幕 转为GIF 图片

    近期winform 做的一个截取屏幕的软件给大家!谁要留言给我哦! sss

  8. idea中执行“npm/yarn”命令，提示'node/yarn' 不是内部或外部命令，也不是可运行的程序

    问题:idea中执行"npm/yarn"命令,提示'node/yarn' 不是内部或外部命令,也不是可运行的程序.但是在本地打开cmd 是可以运行npm/yarn命令的 解决方法: ...

  9. 虚拟环境 venv的使用--（venv 一）

    一.引言最近在学习<Flask Web Development 2nd Edition>的时候,作者开篇就介绍如何使用 venv 来管理 Python 环境 .自我觉得作者讲的非常好,想要 ...

  10. KVM虚拟机根分区磁盘扩容

    CentOS7.6, libvirt 4.5.0 , KVM虚拟机根分区扩容. 在宿主机执行0, 对LVM磁盘进行扩容 0. qemu-img resize 10.0.0.1_node1.qcow2 ...