方法-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. 委托、事件与Observer设计模式

    范例说明 上面的例子已不足以再进行下面的讲解了,我们来看一个新的范例,因为之前已经介绍了很多的内容,所以本节的进度会稍微快一些: 假设我们有个高档的热水器,我们给它通上电,当水温超过95度的时候:1. ...

  2. 转+更新 Graphviz 教程,例子+ 高级应用 写代码,编程绘制架构图(分层拓扑图) 转自官网

    1. Graphviz介绍 Graphviz是大名鼎鼎的贝尔实验室的几位牛人开发的一个画图工具. 它的理念和一般的“所见即所得”的画图工具不一样,是“所想即所得”. Graphviz提供了dot语言来 ...

  3. Jquery的简单API

    dsfsdjgsdjgsdjkg <script>console.log('erftwet')</script>

  4. zabbix监控系统时间的问题

    分类: 监控 2013-03-19 21:40:11   发现zabbix监控系统时间的一个问题!zabbix监控系统时间用的key是system.localtime,返回当前的系统时间,而配置tig ...

  5. Smallest Common Multiple-freecodecamp算法题目

    Smallest Common Multiple 1.要求 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. 2.思路 设定一个twoMultiple(a,b)函数,求出输入两个参数的最小公 ...

  6. [BZOJ] 2044: 三维导弹拦截

    排序去掉一维,剩下两维可以直接\(O(n^2)\)做,也可以用二维树状数组(但是不方便建边),解决第一问 第二问,按转移顺序连边,建出DAG,求最小不可重链覆盖即可 #include<algor ...

  7. 第四篇:python操作数据库时的传参问题

    python在操作数据库执行sql的时候我们经常会遇到传参问题,以下是我总结的几种方法: 1.格式化字符串 city = 'beijing'cur.execute(“SELECT * FROM %s ...

  8. 四、Shell 数组

    Shell 数组 数组中可以存放多个值.Bash Shell 只支持一维数组(不支持多维数组),初始化时不需要定义数组大小(与 PHP 类似). 与大部分编程语言类似,数组元素的下标由0开始. She ...

  9. 三、MySQL PHP 语法

    MySQL PHP 语法 MySQL 可应用于多种语言,包括 PERL, C, C++, JAVA 和 PHP. 在这些语言中,Mysql在PHP的web开发中是应用最广泛. 在本教程中我们大部分实例 ...

  10. 神经网络系列学习笔记(二)——神经网络之DNN学习笔记

    一.单层感知机(perceptron) 拥有输入层.输出层和一个隐含层.输入的特征向量通过隐含层变换到达输出层,在输出层得到分类结果: 缺点:无法模拟稍复杂一些的函数(例如简单的异或计算). 解决办法 ...