如果查看css手册，会发现display有许多带table字样的可选属性，有table、inline-table、table-row-group、table-row、table-cell等10个之多，可以赋予div类似于<table>等标签的布局特性。大多数浏览器（IE6/7除外）对其支持良好，其实现原理参考《匿名表格元素》。

　　组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。这在子元素不确定宽高和数量时，特别实用！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Demo001_displayTable</title>

    <style>

        /*** table-cell middle center组合使用 ***/

        .cell {

            display: table-cell;

            vertical-align: middle;

            text-align: center;

            width: 240px;

            height: 180px;

            border:1px solid #666;

        }

    </style>

</head>

<body>

    <div class="cell">

        <p>我爱你</p>

    </div>

    <div class="cell">

        <p>我爱你</p><p>亲爱的中国</p>

    </div>

    <div class="cell">

        <p>我爱你</p><p>亲爱的中国</p><div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>

    </div>

</body>

</html>

　　效果：

　　对于只需要垂直居中的情况，可以去掉text-align:center属性。

　　对table-cell元素设置百分比（如100%）的宽高值时无效的，但是可以将父元素设置display:table，再将父元素设置百分比宽高，子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。代码示例如下：

    <style>

        html,body{height: 100%;margin:0;padding:0;}

        /*** .table和.cell都将撑满页面，cell的子元素水平垂直居中 ***/

        .table{

            display: table;

            width: 100%;

            height: 100%;

        }

        .cell {

            display: table-cell;

            vertical-align: middle;

            text-align: center;

            border: 1px solid #666;

        }

    </style>

    <div class="table">

        <div class="cell">

            <p>我爱你</p>

            <p>亲爱的中国</p>

            <div style="width:100px;height:50px;border:1px solid #ccc;display:inline-block">div(inline-block)</div>

        </div>

    </div>

　　table系列的display属性还可以实现等高布局、灵活页眉/页脚、水平自适应布局等等，参考文章《css Table布局》《display:table-cell的应用》。

特别提醒：

　　1.table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height。

　　2.设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性。

display:table-cell实现水平垂直居中的更多相关文章

  1. 让div水平垂直居中的几种方法

    最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...

  2. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  3. css水平垂直居中问题

    水平居中: 行内元素:text-align:center; 块级元素:magin:0 auto; 子元素设置:position:absolute;  left:50%;  transform:tran ...

  4. display:table的几个妙用：垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  5. 垂直居中display:table;

    父级元素 display:table: 子元素 display:table-cell:vertical-align:middle:

  6. CSS实现元素水平垂直居中—喜欢对称美，这病没得治

    [TOC] 在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用text-align:center;如果它是一个块级元素,就对它自身应用margin:auto.然而要对一 ...

  7. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  8. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  9. div中div水平垂直居中

    方法-1 img { vertical-align: middle; } div:before { content: ""; display: inline-block; widt ...

随机推荐

  1. 剑指offer三十二之把数组排成最小的数

    一.题目 输入一个正整数数组,把数组里所有数字拼接起来排成一个数,打印能拼接出的所有数字中最小的一个.例如输入数组{3,32,321},则打印出这三个数字能排成的最小数字为321323. 二.思路 ( ...

  2. EJB3 jpa 数据库表的映射关系

    1)多对一映射关系(单向) 使用外键关联,在外键的选取上以多的一方为主,即外键要在多的一方体现出来 @Entity public class Company implements Serializab ...

  3. commons-pool2

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7375611.html 1.前言 本章介绍一下常用基础Jar包commons-pools2,最近使用到了thrif ...

  4. certificate verify fails (https://gems.ruby-china.org错误

    首先:执行这一步报错的背景是: 更换gems源, 通常执行 gem sources --add https://gems.ruby-china.org/ --remove https://rubyge ...

  5. 使用Topshelf部署Windows服务

    新建一个控制台应用程序,使用Nuget安装TopShelf: nuget Install-Package Topshelf 测试代码: 在Main中输入: //FileInfo fi = new Fi ...

  6. databinding在android studio2.3版本后不再默认支持使用

    databinding在android studio2.3版本后不再默认支持使用,需要在项目的app-build-gradle的 dependencies 里面添加 apt 'com.android. ...

  7. 利用ggplot2画出各种漂亮图片详细教程

    1.Why use ggplot2 ggplot2是我见过最human friendly的画图软件,这得益于Leland Wilkinson在他的著作<The Grammar of Graphi ...

  8. [笔记] Python 图片转字符画

    一.介绍 用Python 代码完成图片转字符画 二.python 环境 Python 3.6.6 pillow 5.1.0  Python 图像处理库, 需要另外安装 三.原理 gray ＝ 0.21 ...

  9. [C++][转]CPU字节序 网络序 主机序 大端小端

    原帖:http://www.cnblogs.com/darktime/p/3298075.html 不同的CPU有不同的字节序类型 这些字节序是指整数在内存中保存的顺序 这个叫做主机序最常见的有两种1 ...

  10. javaScript年份下拉列表框内容为当前年份及前后50年

    javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 <script language="javascript" type="text/j ...