css的div动态水平垂直居中
div动态水平垂直居中,思路如下:
(1)先定位。如果相对于距离最近的父元素,用absolute;如果相对于body,用fixed。
(2)然后,top和left都设为50%。
(3)要居中的div的margin-top和margin-left,都设置为该div高度和宽度的一半。
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
border:1px solid red;
margin-left:-100px;
margin-top:-50px;
如果只是水平居中,只用一个margin就行了。
margin:0 auto;
css的div动态水平垂直居中的更多相关文章
- CSS:div/img水平垂直居中
div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- JS实现div动态水平垂直居中
在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子: <div class="mui-c ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...
- CSS布局:元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- css知识笔记:水平垂直居中(别只看,请实操!!!)
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?
欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...
随机推荐
- 将CGCS2000的坐标值转换为WGS84的坐标值
打开图层数据,或者将已有的Excel数据导入到ArcMap中,然后打开Toolbox, ArcToolbox --> Projections and Transformations --> ...
- 关于新版vue-cli安装json-server在build文件里没生成出dev-server文件
今天在安装json-server时遇到一个问题,build文件里并没有生成dev-server.js文件, 开始是怀疑配置有问题,或者安装不正确,然后重新安装了两三次,还是这样,郁闷.. 通过查询资料 ...
- C#排序算法的实现---选择排序
一.算法原理 每一趟从待排序的数据元素中选出最小(或最大)的一个元素,顺序放在已排好序的数列的最后,直到全部待排序的数据元素排完. 选择排序算法的运作如下: 1.对比数组中前一个元素跟后一个元素的大小 ...
- 关于牛客网C语言结构体位域(bit-fields)的一道题
题目链接地址: https://www.nowcoder.com/questionTerminal/f4e20747a2dd4649bac0c028daa234f4 来源:牛客网 低地址字节 Byte ...
- Spark学习之路 (七)Spark 运行流程[转]
Spark中的基本概念 (1)Application:表示你的应用程序 (2)Driver:表示main()函数,创建SparkContext.由SparkContext负责与ClusterManag ...
- [PAT] A1019 General Palindromic Number
[题目] https://pintia.cn/problem-sets/994805342720868352/problems/994805487143337984 题目大意:给定一个N和b,求N在b ...
- xctf-i-got-id-200(perl网页文件+ARGV上传造成任意文件读取)
打开url发现有三个链接,点进去都是.pl文件,且只有files可以上传文件. .pl文件都是用perl编写的网页文件 这里上传了又将文件的内容全部打印出来,那么猜想后台应该用了param()函数. ...
- [CF1303F] Number of Components - 并查集,时间倒流
有一个 \(n \times m\) 矩阵,初态下全是 \(0\). 如果两个相邻元素(四连通)相等,我们就说它们是连通的,且这种关系可以传递. 有 \(q\) 次操作,每次指定一个位置 \((x_i ...
- 小白月赛22 E : 方格涂色
E:方格涂色 考察点 : 思维,模拟 坑点 : long long 其他的好像没什么,读懂题意就可以 AC 不要被样例画的图所迷惑 Code: #include <vector> #inc ...
- Java体系结构
java程序运行过程图 文章中内容大多来自该处Java虚拟机规范----JVM体系结构 - Java初级码农 - 博客园 JDK体系 JDK体系结构图 JDK.JRE.JVM之间的关系 JDK:Jav ...