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. 铭飞MCMS将4.6模板标签升级至4.7

    个人博客 地址:https://www.wenhaofan.com/article/20190610145529 介绍 MCMS提供的模板大多数都使用的是4.6版本的标签,但是现在MCMS最新的已经是 ...

  2. js参数自定义

    function test(){ //利用对象自定义参数名称 var t = {P1:"a",P2:"b"} //返回的数据 var ttt = {a:&quo ...

  3. PAT (Advanced Level) Practice 1019 General Palindromic Number (20 分) (进制转换,回文数)

    A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...

  4. php函数的巧妙应用

    直接切入正题: 1.extract();函数从数组中把变量导入到当前的符号表中 对于数组中的每个元素,键名用于变量名,键值用于变量值. 第二个参数 type 用于指定当某个变量已经存在,而数组中又有同 ...

  5. Django内置的中间件

    内置中间件 1. django.middleware.gzip.GZipMiddleware:相应数据进行压缩.如果内容长度少于200个长度,那么就不会压缩. 在settings.py文件中配置MID ...

  6. LaTeX技巧002:\section{}章节命令添加中文编译不了问题

    在宏包hyperref前面添加选项CJKbookmarks \usepackage[CJKbookmarks]{hyperref} 并且把这句话尽可能地加在导言区的最底部,即尽可能靠近 \begin{ ...

  7. PIE-SDK For C++栅格数据集的读取

    1.功能简介 栅格数据包含很多信息,在数据的运用中需要对数据的信息进行读取,目前PIE SDK支持多种数据格式的数据读取,下面对栅格数据格式的数据读取功能进行介绍. 2.功能实现说明 2.1 实现思路 ...

  8. macOS 下安装tomcat

    The Servlet 4.0 specification is out and Tomcat 9.0.x does support it. Time to dive into Tomcat 9. [ ...

  9. 解决pjax重复加载js导致事件重复绑定的问题

    个人博客 地址:http://www.wenhaofan.com/article/20180925232057 1.所有js统一在pjax容器外引入 在pjax容器外引入的js只会被引入一次,所以不会 ...

  10. Linux C++ 直接选择排序,冒泡排序,快速排序

    选择排序的思想是:每次从待排序中选择最小(大)的元素插入已经排好的序列中. /*直接选择排序*/ #include <iostream> using namespace std; void ...