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. windows系统安装部署python3.5和python2.7双解释器并存

    前提材料准备: 下载对应版本的安装包:下载地址:https://www.python.org/downloads/windows/ python3.8.x安装包下载: python2.7.x安装包下载 ...

  2. Java输入和输出数组(加逗号)

    输入示例 61,2,3,4,5,6 输出示例 1,2,3,4,5,61,2,3,4,5,6 import java.util.Scanner; public class Demo01 { public ...

  3. 题解【洛谷P3456】[POI2007]GRZ-Ridges and Valleys

    题面 考虑 \(\text{Flood Fill}\). 每次在 \(\text{BFS}\) 扩展的过程中增加几个判断条件,记录山峰和山谷的个数即可. #include <bits/stdc+ ...

  4. web做题记录

    2020.1.19 南邮ctf 签到题 题目:key在哪里? 在火狐浏览器中右键选择打开查看源代码,在源代码可以看到如下 因为是第一次做这个题,不知道提交啥,我先提交了“admiaanaaaaaaaa ...

  5. html css二级导航栏

    二级导航栏制作: 1.将一级导航栏去除列表样式(list-style:none),并给予浮动,使其横向排列(float:left) 2.给每个li中添加一个<a></a>标签, ...

  6. LeetCode 第四题 Median of Two Sorted Arrays 二人 渣渣选手乱七八糟分析发现基本回到思路1

    题目 There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...

  7. Java_Day4(上)

    Java learning_Day3(上) 本人学习视频用的是马士兵的,也在这里献上 <链接:https://pan.baidu.com/s/1qKNGJNh0GgvlJnitTJGqgA> ...

  8. gazebo仿真踩坑--rviz中设定机器人的目标位置,move_base后台日志报错

    启动仿真环境及各种节点(amcl,move_base,map_server)后,在rviz中设定机器人的目标位置,后台日志报错 [ INFO] [1571974242.864525935, 40.51 ...

  9. Python-Django学习笔记(三)-Model模型的编写以及Oracle数据库的配置

    Django使用的 MTV 设计模式(Models.Templates.Views) 因此本节将围绕这三部分并按照这个顺序来创建第一个页面 模型层models.py 模型是数据唯一而且准确的信息来源. ...

  10. VS Code中Ionic serve命令 执行跳出的问题

    项目情况:用vscode编写的ionic(tab类型)项目(具体使用到的技术Angular\Typescrip\Ionic) 具体情况如下: 找到的可能原因: 出错的项目情况:在一个ts文件中编写两个 ...