父元素高度确定的多行文本、图片、块状元素的垂直居中的方法有两种：

方法一：将内容写入table(包括tbody、tr、td)中的td标签里，同时设置 vertical-align：middle。

css中属性 vertical-align只有在父元素为 td 或 th 时，才会生效。例如：

<body>

<table><tbody><tr><td class="box">

<div>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

    <p>我是垂直居中的</p>

</div>

</td></tr></tbody></table>

</body>

css：

table td{height:300px;background:#000}

方法二:

html代码：

给父容器添加display:table-cell和vertical-align:middle;

<div class="div1">

    <div>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

        <p>看我是否可以居中。</p>

    </div>

</div>

css代码：

<style>

.div{

    height:400px;

    background:#eee;

    display:table-cell;

    vertical-align:middle;

}

</style>

　　

多行文本垂直居中div高度确定的更多相关文章

  1. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  2. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  3. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  4. 水平垂直居中div（css3）

    一.在需要居中的元素加上如下C3属性即可: <!doctype html><html lang="en"><head> <meta cha ...

  5. 如何设置div高度为100%

    div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...

  6. 如何让两个 并列的div高度相等

    哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(i ...

  7. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  8. CSS布局：div高度随窗口变化而变化(BUG会有滚动条)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 限制div高度当内容多了溢出时显示滚动条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type"content= ...

随机推荐

  1. [翻译] C++ STL容器参考手册（第二章 <deque>）

    返回总册 本章节原文:http://www.cplusplus.com/reference/deque/deque/ 1. std::deque template < class T, clas ...

  2. Mapper映射语句高阶应用——ResultMap

    resultMap 元素是MyBatis 中最重要最强大的元素.它就是让你远离 90%的需要从结果 集中取出数据的 JDBC代码的那个东西, 而且在一些情形下允许你做一些 JDBC 不支持的事 情. ...

  3. javascript 数组学习(一)

    今天学习了一下<javascript权威指南(第6版)>的第七章:数组 一.数组的创建: 数组的创建有3种方法: var colors = new Array(3);//可以省略new v ...

  4. Python学习(五) Python数据类型：列表（重要）

    列表: list是一组有序项目的数据结构. 列表是可变类型的数据,列表用[]进行表示,包含了多个以","分隔的项目. list=[] type(list) //<type ' ...

  5. Apache的prefork模式和worker模式

    prefork模式这个多路处理模块(MPM)实现了一个非线程型的.预派生的web服务器,它的工作方式类似于Apache 1.3.它适合于没有线程安全库,需要避免线程兼容性问题的系统.它是要求将每个请求 ...

  6. JAVA JNI学习

    JAVA JNI   JNI是Java Native Interface的缩写,中文为JAVA本地调用.从Java1.1开始,Java Native Interface(JNI)标准成为java平台的 ...

  7. oracle安装报错检查操作系统版本: 必须是5.1 or 5.2。实际为 6.1未通过

    oracle安装时报错,提示:操作系统版本: 必须是5.1 or 5.2.实际为 6.1未通过 , 解决方案 这里只认证5.1.5.2的OS版本,但是我的win server 2008系统版本为6.1 ...

  8. 思维导图MindManager基础教程

    Mindjet MindManager是由美国Mindjet公司开发的一款优秀的思维导图和知识管理软件,能够帮助你将想法和灵感以清晰的树桩形式记录下来,这对梳理工作计划和规划很有帮助. 思维导图(Mi ...

  9. Oracle Trunc

    http://www.cnblogs.com/xiaoyudz/archive/2011/03/18/1988467.html

  10. 怎样在Github参与一个开源项目

    转载:http://www.csdn.net/article/2014-04-14/2819293-Contributing-to-Open-Source-on-GitHub 最近一年开源项目特别的热 ...