display:table / display:table-cell 用法

CSS display:table 布局技巧

最新推荐文章于 2021-09-27 01:26:40 发布

转载最新推荐文章于 2021-09-27 01:26:40 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/agansj/p/8243636.html

本文介绍如何利用 CSS 的 display:table 和 display:table-cell 属性实现水平和垂直居中的布局效果，适用于固定宽度的文字自动换行场景。

display:table 元素会作为块级表格来显示（类似table）；表格前后带有换行符；

display:table-cell 元素会作为表格单元格来显示（类似<td> 和 <th>）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

        .wrap {
            display:table;
            width: 600px;
            height: 300px;
            background-color: pink;
            margin:300px auto;
        }
        .box {
            display:table-cell;
            /*height:300px;  这个可以没有*/
            text-align:center;
            vertical-align:middle;
        }


    </style>
</head>
<body>
    <div class="wrap">
        <div class="box">
            投资发展有限公司
        </div>
    </div>
</body>
</html>

display:table一般是使用在父元素上，display:table-cell 是使用在子元素上。

<!DOCTYPE html>    
<html>    
    <head>    
        <meta charset="utf-8" />    
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
        <title>demo</title>    
        <style type="text/css">    
            .box {    
                width: 500px;    
                height: 300px;    
                border: 1px solid #FFF;    
                background-color: #999;    
                display: table;    
            }    
            .wrap{    
                display: table-cell;    
                vertical-align: middle;     
           
            }          
                
        </style>    
    </head>    
    <body>    
    
        <div class="box">    
            <div class="wrap">  
                我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行固定宽度的文字自动换行并垂直剧中固定宽度的文字自动换行并垂直剧中   
            </div>    
        </div>      
    </body>    
</html>