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

方法一：将内容写入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. codeforces 519E A and B and Lecture Rooms（LCA，倍增）

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud E. A and B and Lecture Rooms A and B are ...

  2. gradle构建依赖

    本地依赖 gradle 作为构建工具,能够很方便的使用本地jar包,以下为使用的代码块. dependencies { //单文件依赖 compile files('libs/android-supp ...

  3. phpmyadmin上传较大sql文件

    1.找到phpmyadmin目录,新建文件夹import 2.打开import文件夹,将要导入的sql文件放进去 3.打开config.inc.php文件,修改$cfg['UploadDir']等于i ...

  4. java的LinkedList的用法

    http://blog.chinabyte.com/blog.php?do-showone-uid-135325-itemid-454704-type-blog.html 总结下,LinkedList ...

  5. Javascript经典实例 - 字符串

    1] 'this is a string'这是字符串直接量,new String('this is a string')这是字符串对象,字符串对象可以用字符串对象所带的属性和方法,直接量在“表面上”也 ...

  6. 各种浏览器的agent信息(IE Chrome Safari Firefox)

    Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/53 ...

  7. shell之变量替换：临时替换

    ​${FILE:-word} 若变量为空,给变量FILE添加一个临时默认值word,FILE本身值并不变化eg: FILE1=${FILE:-word} 若FILE为空,则赋予FILE1值word $ ...

  8. 异常处理与调试4 - 零基础入门学习Delphi53

    调试(Debug) 让编程改变世界 Change the world by program 调试(Debug) 在应用程序开发中检测.处理程序中的错误是一个非常重要的环节.在Delphi的集成开发环境 ...

  9. Mysql bigint 类型转为datetime

    最近在使用quartz,在mysql中其数据库表中的时间都是使用bigint类型存储的,要想使其查询结果显示为yyyy-mm-dd hh:MM:ss的格式需要使用 from_unixtime()函数, ...

  10. MongoDB insert performance rapidly dropping

    http://dba.stackexchange.com/questions/65554/mongodb-insert-performance-rapidly-dropping http://www. ...