方法-1

img { vertical-align: middle; }
div:before { content: "";
display: inline-block;
width: 0; height: 100%;
vertical-align: middle;

方法0

.item{
  position:absolute
  top:50%
  left:50%
  transform:translate3D:(-50%,-50%,0)
}

方法1:水平:margin:0 auto;

垂直:使用定位属性,小的div在大的div中分别绝对定位为:left:50%;top:50%,然后再添加margin-left\top属性,值为负的小div的宽高的一半

            .parent {
width: 500px;
height: 500px;
border: 1px solid red;
position: relative; } .child{
width: 100px;
height: 100px;
border: 1px solid darkgreen;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}

方法2:table cell:

            .parent {
width: 500px;
height: 500px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
} .chlid{
width: 100px;
height: 100px;
border: 1px solid darkgreen;
margin: 0 auto;
}

3.clientWidth:可视区域宽度;offsetWidth:元素宽度,scrollWidth:页面总宽。

4.行级元素可通过line-height垂直居中

5 移动端css3:

.parent{
display:-webkit-box; //显示成盒子模式
-webkit-box-align:center; //垂直居中
}

6 flex布局

.box {
display: flex;
justify-content: center;
align-items: center;
}

div中div水平垂直居中的更多相关文章

  1. 关于div中图片水平垂直居中的问题

    最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...

  2. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  3. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  4. div中的img垂直居中的方法,最简单! 偷学来的,,,不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

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

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

  6. div中文字水平和垂直居中的css代码

    HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px so ...

  7. div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  8. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  9. 设置 img 在 div 中水平居中和垂直居中

    Ø  前言 写 html + css 时,img 标签的垂直与水平居中,应该是很常见的设计.实现的方式很多,但是容易遗忘,下面分别整理了几种实现方式. 1.   css 代码 <style ty ...

随机推荐

  1. Webpack机制、原理简单小结

    一.webpack的构成 entry  代表项目的入口 module  开发中,每一个文件可以看作一个module chunk  代码块 loader  模块转化器 plugin  扩展插件,自定义w ...

  2. c++ 循环程序的作业,2017年10月10日作业题。

    作业1: 需求:输出一个由 * 符号所组成的矩形,要求每行有50个 * ,一共需要有60行.使用双重for循环完成. 作业2: 需求:输出一个由 * 符号所组成的三角形,要求第一行一个 * ,第二行 ...

  3. c++ 中常量与变量 基本数据类型

    c++中常量如何分类? 1.整数常量,所有的整数. 整数又分为 int (integer) 占用4个字节 一个字节占几个二进制位?8个二进制位,一个整型变量占32位二进制位 (内存中开辟出来的存储空间 ...

  4. 新装Ubuntu后的一些配置

    一:Ubuntu 16.04 开启root用户和使用root用户登陆 1. 编辑/etc/lightdm/lightdm.conf autologin-guest=false autologin-us ...

  5. 51nod 1202 不同子序列个数(计数DP)

    1202 子序列个数 基准时间限制:1 秒 空间限制:131072 KB 分值: 40      子序列的定义:对于一个序列a=a[1],a[2],......a[n].则非空序列a'=a[p1],a ...

  6. poj 3273 分期问题 最大化最小值

    题意:将N个账款分给城M个财务期,使得每个分期账款和的值最大? 思路: 每次mid为分期账款 如果分期次数小于m说明mid太大,减上限  反正 增下限 开始下限设为 最大值 上限设为和 解决问题的代码 ...

  7. 2、python中的数字

    第二篇开始谈谈python中的数据. 一.前言 python中的数字包含了整数.浮点数.复数三种.在python的早期版本,或许可以看到正数被分为长整数与短整数,后来被取消了,因此这里不作讨论.通常我 ...

  8. Appium运行时没有启动activity的权限:A new session could not be created.(Original error: Permission to start activity denied)

    小白搞appium,遇到启动不了activity的问题: 查找解决方案说是跟AndroidManifest.xml有关系,参考:https://github.com/appium/appium/iss ...

  9. 15,scrapy中selenium的应用

    引入 在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生如果直接用scrapy对其url发请求,是获取不到那部分动态加载出来的数据值,但是通过观察会发现,通过浏览器 ...

  10. Docker背后的内核知识(二)

    cgroups资源限制 上一节中Docker背后的内核知识(一),我们了解了Docker背后使用的资源隔离技术namespace,通过系统调用构建了一个相对隔离的shell环境,也可以称之为简单的“容 ...