CSS display: table-cell 用于水平垂直居中

最新推荐文章于 2023-02-09 16:38:49 发布

weixin_30500289

最新推荐文章于 2023-02-09 16:38:49 发布

阅读量235

点赞数

原文链接：http://www.cnblogs.com/HevateArvin/p/10270403.html

版权

CSS display: table-cell 用于水平垂直居中

在 CSS 设置居中时候，水平和垂直居中的设置略有不同，通常我们使用 text-align:center 对图片、文字等行内元素（inline / inline-block）进行水平居中，并使用 line-height 对单行文字设置垂直居中（仅适用于单行文字）。但是，如果使用表格，则可以通过 td（单元格元素）的 align="center" 及 valign="middle" 属性设置单元格内容的水平和垂直居中。而对于那些不是表格的元素，可以通过 display: table-cell 将其模拟成一个表格单元格 td，这样就可以通过 CSS 的vertical-align: middle; /* 垂直居中*/ 和 text-align: center; /* 水平居中*/ 属性进行设置。

display 值及其作用

display 值	模拟	对应标签
table	块元素级的表格	`<table>`
inline-table	内联元素级的表格	`<table>`
table-caption	表格标题	`<caption>`
table-cell	表格单元格	`<td>`
table-row	表格行	`<tr>`
table-row-group	表格行组	`<tbody>`
table-column	表格列	`<col>`
table-column-group	表格列组	`<colgroup>`
table-header-group	表格标题组	`<thead>`
table-footer-group	表格脚注组	`<tfoot>`

display: table-cell 实现水平垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .container{
                width: 100px;
                height:50px;
                border: 1px solid black;
                display: table-cell;    /* 模拟为td单元格，同时形成了 BFC */
                /*display: table-caption  如果设置为此项 则不能使用水平和垂直居中*/ 
                vertical-align: middle; /* 垂直居中*/
                text-align: center;     /* 水平居中*/
                margin:50px;     /* table-cell 对 margin 不感知，此处设置无效*/
            }
        </style>
    </head>
    <body>
        <div class="container">
            a
        </div>
        <div class="container">
            b
        </div>
        <div class="container">
            c
        </div>
    </body>
</html>

display: table-cell

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .con{
                background: red;
                display: table; /* 将父元素div模拟为块级表格 table*/
                margin: 50px;   /* 设置父元素 table 的margin*/
            }
            .container{
                width: 200px;
                height:50px;
                border: 1px solid black;
                display: table-cell;        
                vertical-align: middle; 
                text-align: center;     
                /*margin: 50px;*/  去掉设置无效的 margin
            }
        </style>
    </head>
    <body>
        <div class="con">
            <div class="container">
            a
            </div>
            <div class="container">
                b
            </div>
            <div class="container">
                c
            </div>
        </div>
        
    </body>
</html>

外层div模拟为table，设置出margin

子元素table-cell自动撑满父元素table

模拟之后，其属性的使用，就可以将其视作一个标签进行使用。

reference

display:table-cell实现水平垂直居中

css Table布局-display:table

CSS布局奇淫技巧之--各种居中

转载于:https://www.cnblogs.com/HevateArvin/p/10270403.html

weixin_30500289

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS display: table-cell 用于水平垂直居中

CSS display: table-cell 用于水平垂直居中在 CSS 设置居中时候，水平和垂直居中的设置略有不同，通常我们使用 text-align:center 对图片、文字等行内元素（inline / inline-block）进行水平居中，并使用 line-height 对单行文字设置垂直居中（仅适用于单行文字）。但是，如果使用表格，则可以通过 td（单元格元素）的 ali...
复制链接

扫一扫