如果div中只有一个span一个元素，可以使用line-height。如果div中还有其他元素，可以设置span的css如下：

.span{

position: absolute;

top: 50%;

transform: translateY(-50%);

}

　　

一、div设置百分百高度实现描述

在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局div高度为百分比也是无效的，因为div解析上级高度为0，自然div height 100%实际高度也为0。

浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

如果想让一个元素的百分比css高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

div有两个父元素html和body，如果想让div的百分比高度起作用的话就要为html和body设置高度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>成功设置100%高度</title>

    <style type="text/css">

        html,body{

            height: 100%;

        }

    </style>

</head>

<body>

<div style="height: 100%;background-color: #4d85d1">

    所在div设置高度100%

</div>

</body>

</html>

如何让div中的span垂直居中 ----height:100%设置div的高度的更多相关文章

  1. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

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

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

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

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

  4. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  5. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

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

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

  7. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

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

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

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

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

随机推荐

  1. 【学员管理系统】0x01 班级信息管理功能

    [学员管理系统]0x01 班级信息管理功能 写在前面 项目详细需求参见:Django项目之[学员管理系统] 视图函数: 我们把所有的处理请求相关的函数从 urls.py中拿出来,统一放在一个叫view ...

  2. 【linux】新添加一块硬盘制作LVM卷并进行分区挂载

    linux服务器新添加一块硬盘,可以直接将盘格式化挂载就能用,比如挂载在/usr/local目录,但是这样有一个弊端,就是如果这一块磁盘满了,后续想要扩容的话,不能继续挂载这个/usr/local挂载 ...

  3. HDU - 1213 How Many Tables 【并查集】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1213 题意 给出N个人 M对关系 找出共有几对连通块 思路 并查集 AC代码 #include < ...

  4. ES6 Fetch API HTTP请求实用指南

    本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...

  5. Linux_服务器_03_xxx is not in the sudoers file.This incident will be reported.的解决方法

    1.切换到root用户下,怎么切换就不用说了吧,不会的自己百度去. 2.添加sudo文件的写权限,命令是:chmod u+w /etc/sudoers 3.编辑sudoers文件vi /etc/sud ...

  6. java对象的初始化过程和创建对象的几种方式

    1.加载父类,加载父类的静态属性和静态代码块 2.加载子类,加载子类的静态属性和静态代码块 3.初始化父类中的非静态属性并赋初值,执行父类非静态代码块,执行父类构造. 4.初始化子类中的非静态属性并赋 ...

  7. listen 54

    Our library is also open for the local residents. People are doing their Christmas shopping. Later t ...

  8. MySQL当月汇总 及负毛利汇总_20161027

    #当月汇总 及负毛利汇总 SELECT e.ID,e.city AS 城市 ,f.当月销售总额,f.当月成本总额,f.当月毛利总额,f.当月优惠券总额,f.当月赠品总额,f.当月毛利总额-f.当月优惠 ...

  9. 发个IOCP的C++例子

    IOCP的c++例子 IOCP这个东西连续关注了将近3年的时间,这个代码从哪里找到的已经忘了,下面是作者的信息.感谢他提供的代码! /*++ Copyright (c) 2004 模块名: iomod ...

  10. thinkjs,promise

    thinkjs是奇舞团开源的一款NodejsMVC框架,该框架底层基于Promise来实现,很好的解决了Nodejs里异步回调的问题. 可参考: http://www.thinkjs.org/ htt ...