如果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. Cordova插件相关常用命令

    一,插件相关常用命令   1,查看所有已经安装的插件 1 cordova plugin ls 2,安装插件(以camera插件为例) 1 cordova plugin add cordova-plug ...

  2. LeetCode——Binary Tree Postorder Traversal

    Given a binary tree, return the postorder traversal of its nodes' values. For example: Given binary ...

  3. Java for LeetCode 137 Single Number II

    Given an array of integers, every element appears three times except for one. Find that single one. ...

  4. HDU - 1260 Tickets 【DP】

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1260 题意 有N个人来买电影票 因为售票机的限制 可以同时 卖一张票 也可以同时卖两张 卖两张的话 两 ...

  5. 验证控件 .net

    检查Page.IsValid   if (typeof (Page_ClientValidate) == 'function') {                Page_ClientValidat ...

  6. matlab unique()函数

    a = [30, 3,6; 19, 20, 20; 30,3,  6;] b=unique(a,'rows') 返回结果是: b = [19,    20 ,20; 30, 3, 6] b=uniqu ...

  7. html5--1.9 img元素嵌入图片

    html5--1.9 img元素嵌入图片 学习要点: img元素嵌入图片学习一个新属性:title 1.img的属性 1.src:必要属性,制定图片来源的路径; 2.alt属性:当图片无法显示时的替代 ...

  8. Spring MVC文件上传下载工具类

    import java.io.File; import java.io.IOException; import java.io.UnsupportedEncodingException; import ...

  9. mysql之count

    两种引擎对count的处理 CREATE TABLE `test` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `name` char(15) D ...

  10. linux命令学习笔记（51）：lsof命令

    lsof(list open files)是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在, 通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以如传输控制协 ...