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

方法一：将内容写入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. ARM编译空间属性（转）

    原文地址:http://www.cnblogs.com/hongzg1982/articles/2205093.html 1. 程序的空间属性 一般情况下,一个程序本质上都是由 bss段.data段. ...

  2. poj 2112 floyd+Dinic最大流+二分最小值

    题目大意是: K台挤奶机器,C头牛,K不超过30,C不超过200,每台挤奶机器最多可以为M台牛工作,给出这些牛和机器之间,牛和牛之间,机器与机器之间的距离,在保证让最多的牛都有机器挤奶的情况下,给出其 ...

  3. 创建ListView的基本步骤

    参考<疯狂android讲义>第2.5节P94 1.创建一个或者多个ListView <LinearLayout xmlns:android="http://schemas ...

  4. Windows10 磁盘活动时间百分之百导致系统卡顿解决方法

    最近电脑边的特别慢,打开任务管理器发现是磁盘活动时间时不时的就会变成100%.起初是以为硬盘出问题了,后来网上查了一下才发现很多人都遇到过这个问题,其原因就是Windows的SuperFetch和家庭 ...

  5. centos minimal 安装无法自定义分区

    安装了太多版本的linux,最后还是决定安装CentOS的minimal版本: 安装的时候发现,没办法自定义分区,经查确实在命令行界面下安装是没有自定义分区的. 但是不管怎么安装都是没有图形介面,最后 ...

  6. python学习资料

    http://woodpecker.org.cn/diveintopython/ http://www.cnblogs.com/txw1958/archive/2012/12/10/A_Byte_of ...

  7. C# 语法技巧_三目运算_switch_case

    一.三目运算符 三目运算符的一种简便写法: bool b = str == "abc" ? false : true; 当是自身时,实际上别吝啬那一个括号,有一个括号,实际上更容易 ...

  8. 使用achartengine实现自定义折线图 ----附代码 调试OK

    achartengine作为android开发中最常用的实现图标的开源框架,使用比较方便,参考官方文档谢了如下Demo,实现了自定义折线图. package edu.ustb.chart; impor ...

  9. linux多线程socket编程一些心得

    http://hi.baidu.com/netpet/blog/item/2cc79216d9012b54f2de32b9.html 前段时间将新的web模型办到linux上来,用epoll代替了IO ...

  10. 【转】nand flash坏块管理OOB,BBT,ECC

    0.NAND的操作管理方式      NAND FLASH的管理方式:以三星FLASH为例,一片Nand flash为一个设备(device),1 (Device) = xxxx (Blocks),1 ...