一,已知宽高

 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. 什么是序列化?实体类为什么要实现序列化接口?实体类为什么要指定SerialversionUID?

    首先我们说答案:实体类对象在保存在内存中的,而对于web应用程序而言,很多客户端会对服务器后台提交数据请求,如得到某种类型的商品,此时后台程序会从数据库中读取符合条件的记录,并它们打包成对象的集合,再 ...

  2. jmeter设置中文

    jmeter.properties #language=enlanguage=zh_CN

  3. ICSFUZZ:操纵I/O、二进制代码重用以及插桩,来Fuzzing工业控制应用程序

    ​ 本文系原创,转载请说明出处 Please Subscribe Wechat Official Account:信安科研人,获取更多的原创安全资讯 源码:GitHub - momalab/ICSFu ...

  4. ⾼性能IO模型:为什么单线程Redis能那么快

      Redis是单线程,主要是指Redis的⽹络IO和键值对读写是由⼀个线程来完成的,这也是Redis对外提供键值存储服务的主要流程.但Redis的其他功能,⽐如持久化.异步删除.集群数据同步等,其实 ...

  5. SQL server分页的三种方法

    一.Entity Framework的Linq语句的分页写法: var datacount = test.OrderBy(t => t.testID) .Skip(pageSize * (pag ...

  6. Python——高级数据类型(七)

    1. 列表数据类型的声明与访问 # coding=utf-8 #列表数据类型的声明与访问 my_list =[1,2,3,4,5] # 列表中的元素 print (my_list) # 0 1 2 3 ...

  7. salesforce零基础学习(一百二十二)通过 excel / csv创建 object

    本篇参考: https://help.salesforce.com/s/articleView?id=sf.dev_objectcreate_task_lex_from_spreadsheet.htm ...

  8. Tomcat启动JSP项目,搞起来了

    虽然有点复古,但是还是有很多小伙伴在使用的,小编来一篇保姆级教程 1.用idea打开jsp项目 2.添加tomcat配置 3.点击后会出现配置框,这里画框的地方都选上,版本选择1.8,其他的信息内容默 ...

  9. Quicker快速开发,简单的网页数据爬取(示例,获取天眼查指定公司基础工商数据)

    前言 有某个线上项目,没有接入工商接口,每次录入公司的时候,都要去天眼查.企查查或者其他公开数据平台,然后手动录入,一两个还好说,数量多了的重复操作就很烦,而且,部分数据是包含超链接,一不注意就点进去 ...

  10. Ajax案例:点击按钮向服务端发送请求,将服务端返回的响应体结果在div中显示(get请求)

    客户端代码: <style> #div { width: 200px; height: 100px; border: 2px solid blue; } </style> &l ...