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动态水平垂直居中的更多相关文章

  1. CSS:div/img水平垂直居中

    div水平垂直居中方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. JS实现div动态水平垂直居中

    在做页面的过程中,在很多地方都会遇到元素需要水平垂直的居中这个问题,之前总是去网上搜别人的代码,今天仔细研究了一下,分享给大家,先写一个简单的例子: <div class="mui-c ...

  3. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  4. css3 flex 详解,可以实现div内容水平垂直居中

    先说一下flex一系列属性: 一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row- ...

  5. CSS布局:元素水平垂直居中

    CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...

  6. css知识笔记:水平垂直居中(别只看,请实操!!!)

    css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

  7. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  8. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  9. css中:如何让一个图片(不知道宽高,宽高可能比父元素div大),在父元素div内部水平垂直居中,并且不溢出父元素div,且图片不拉伸变形(可等比例缩小)?

    欢迎进入:http://www.jscwwd.com/article/list/%E5%85%A8%E9%83%A8 效果图: 不管父元素的宽高怎么变化,图片都是水平垂直居中的,并且不溢出父元素. 注 ...

随机推荐

  1. javaSE学习笔记(11)--- Map

    javaSE学习笔记(11)--- Map 1.Map集合 现实生活中,我们常会看到这样的一种集合:IP地址与主机名,身份证号与个人,系统用户名与系统用户对象等,这种一一对应的关系,就叫做映射.Jav ...

  2. JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题

    javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...

  3. Codeforces Round #612 (Div. 2) (A-D)

    直 接看所有A后面连续P的个数最大值 #include<cstring> #include<cstdio> #include<set> #include<io ...

  4. 一次H5毛玻璃效果有感

    印象中H5实现毛玻璃效果是挺好实现的,主要的代码就是css的filter:blur. 之前也用过几次,给背景图加高斯模糊啊,给一个div加高斯模糊啊.只要给需要添加高斯模糊的元素直接添加filter属 ...

  5. gulp常用插件之gulp-rev-format使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-rev-format这是一款提供静态资产的哈希格式选项(前缀,后缀,最后扩展名). 更多使用文档请点击访问gulp-rev-format ...

  6. win10配置jdk环境变量

    备注:这里以jdk-10.0.2_windows-x64_bin为例 1.jdk安装目录如下 2.右键“此电脑”-点击“属性”-点击“高级系统设置”-点击“环境变量”-选中“Path”-点击“编辑” ...

  7. sql server针对字符串型数字排序(针对此字符串的长度不一致)

    对于不规则的字符串数字排序,无法按照数字大的大小排序的原因是,字符串数字在数据库中按照ASCII码排序,从字符的第一个数字对比,首先就会将为首个数字相同的排在一起,在从这些字符串里面对比第二个数字,如 ...

  8. .NetCore3.0短网址项目

    Wei.TinyUrl 基于.NetCore3.0 + Mysql开发的短网址项目 项目地址:https://github.com/a34546/Wei.TinyUrl 演示效果: 快速开始 1. 修 ...

  9. mybatis - 基于拦截器修改执行中的SQL语句

    拦截器介绍 mybatis提供了@Intercepts注解允许开发者对mybatis的执行器Executor进行拦截. Executor接口方法主要有update.query.commit.rollb ...

  10. JMeter压测MongoDB

    1.下载mongo-java-driver驱动 官方驱动: https://mongodb.github.io/mongo-java-driver/ 或者Maven: https://mvnrepos ...