css实现水平垂直居中的几种方法
一，已知宽高
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实现水平垂直居中的几种方法的更多相关文章
- CSS实现水平垂直居中的数种方法整合
CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- css如何实现垂直居中（5种方法）
css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法[转]
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
随机推荐
- python使用zipfile压缩文件，包括空目录
zipfile压缩文件.包括空目录 # !/usr/bin/python import os import zipfile def zipdir(dirPath=None, zipFilePath=N ...
- [vue2 + jointjs + svg-pan-zoom] 节点自动布局渲染 + 拖拽缩放
启动vue项目,执行以下命令安装dagre.graphlib.jointjs.svg-pan-zoom. npm install dagre graphlib jointjs svg-pan-zoom ...
- webgl 系列 —— 变换矩阵和动画
其他章节请看: webgl 系列 变换矩阵和动画 动画就是不停地将某个东西变换(transform).例如将三角形不停地旋转就是一个动画 和 CSS transform 类似,变换有三种形式:平移.缩 ...
- 关于如何在IDEA里面配置好Git和Github的相关步骤详解
配置Git 1.File->settings 然后选择其中的Version Control: 接着选择其中的Git选项: 2.将文本框内容定位到本地下载git路径下面 然后点击右边的Test测试 ...
- Java笔记第四弹
File类创建功能 public boolean createNewFile();//当该文件名不存在时,创建一个由该抽象路径名命名的新空文件 public boolean mkdir();//创建由 ...
- 对于利用JavaBean+Servlet+jsp实现增删改查功能题目的实现
首先,为了更好地规范代码,可以分别将不同用处的Java文件放置到不同的文件夹里面 对于实体类,可以放在名为Bean的package里面 对于中间用来实现Java与jsp页面交互的类,可以放在名为Ser ...
- Spring Data Solr 对 Solr 的增删改查实例
Spring Data Solr 就是为了方便 solr 的开发研制的一个框架,其底层是对 SolrJ(官方 API)的封装 一.环境搭建 第一步:创建 Maven 项目(springdatasolr ...
- Java面试——Nginx
一. 二.Nginx 的优点 [1]速度更快:这表现在两个方面:一方面,在正常情况下,单次请求会得到更快的响应:另一方面,在高峰期(如有数以万计的并发请求),Nginx 可以比其他 Web服务器更快地 ...
- VS Code多语言笔记本扩展插件 Polyglot Notebooks
早在2022年12月12日,微软就发布了VS Code的多语言笔记本扩展插件 Polyglot Notebooks,所使用的引擎为. NET Interactive,目前支持包括C#.F#.Power ...
- 【责任链设计模式详解】C/Java/JS/Go/Python/TS不同语言实现
简介 责任链模式(Chain of Responsibility Pattern)是一种行为型设计模式,也叫职责链模式.命令链模式.这种模式为请求创建了一个接收者对象的链,允许你将请求沿着处理者链进行 ...