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

方法一：将内容写入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. OS X EI Capitan 10.11.4中sudo无法起作用的解决方法

    mac升级到OSX EI Capitan 10.11.4后sudo命令无法起作用,执行任何操作总是显示Operation denied.这是因为在10.11.4中引入了Rootless机制,即就算是R ...

  2. python socket 编程之二：tcp三次握手

    建立起一个TCP连接需要经过“三次握手”:第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认:第二次握手:服务器收到syn包,必须确认客户的SYN(ack ...

  3. python-Django环境搭建

    一例中python版本使用3.5版,通常来说linux自带的python都在2.6左右,所以3.5环境要自己编译安装python 第一部分:安装python3.5 001.解决依赖问题 yum -y ...

  4. Mac OSX下面的博客客户端Marsedit使用

       在windows下面,有一个很好用的博客客户端,叫做windows live writer,不得不感叹,其所见即所得的方面真的是很方便,特别是还可以方便的把word上的内容直接帖上去,包括文件中 ...

  5. text-overflow 文字溢出时的设置

    text-overflow : clip | ellipsis clip: 不显示省略标记(...),而是简单的裁切. ellipsis: 当对象内文本溢出时显示省略标记(...) 设置或检索是否使用 ...

  6. TreeSet与HashSet的区别

    Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...

  7. JS 输出对象的属性以及方法[转载]

    <script>var obj  = {attribute:1,method:function() {alert("我是函数");}}for (var i in obj ...

  8. Java 学习 第五篇；面向对象

    1:基本数据类型的拆装: 基本变量类型 通过 new WrapperClass(primitive) 创建包装类对象: 包装类的对象 通过 WrapperInstance.XXXValue() 获取包 ...

  9. PASCAL的优越性:官方的说法（不需要Makefile，节约大量的时间）

    也许你认为为什么我选择pascal代替其他的语言,像C.或者您会拿FreePascal和其他的pascal编译器作比较,那么好,这里您看看FreePascal为什么好: 1.pascal是一个非常简洁 ...

  10. js Array数组的使用

    js Array数组的使用   Array是javascript中的一个事先定义好的对象(也可以称作一个类),可以直接使用 创建Array对象 var array=new Array(): 创建指定元 ...