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>

<!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>

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

reference

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

css Table布局-display:table

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

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

CSS display: table-cell 用于水平垂直居中相关推荐

  1. [CSS] CSS display:flex实现内容水平垂直居中展示

    display:flex实现内容水平垂直居中展示 需要增加下面两点就能实现 首先父级元素必须有高度,没有高度就无法垂直居中,如果想全屏垂直居中,可以设置高度为100vh 比如body设置为这样 bod ...

  2. CSS display:table属性用法解析

    本节和大家重点讨论一下CSS display:table的使用,当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值,CSS表格能够解决所有那些我们在使用绝对定位和浮动 ...

  3. html表格图片垂直居中 css,利用Display: table;实现img图片垂直居中

    html代码: CSS代码: .tablebox{width: 300px;height: 250px;bac公斤round: #fff;display: table} #imgbox{display ...

  4. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中 优点:父元素( ...

  5. CSS文字或元素的水平垂直居中多种方式（简单明了）

    前言:水平居中,我们可以很容易想到使用text-align实现文字水平居中,使用margin:0px auto;可以实现元素水平居中:所以重点将是怎么实现文字和元素的垂直居中?? --- 本文将通过举 ...

  6. HTML+CSS之设置元素的水平垂直居中

    本文主要介绍如何利用HTML和CSS实现元素的水平垂直居中. 1.弹性布局(不换行) justify-content:center:水平居中 align-items:center:垂直居中 .fath ...

  7. CSS如何让一个div水平垂直居中

    大家好,我是新来的程序猿小清,在我们前端开发中,经常会让元素水平垂直居中的,现在我来给大家带来以下几种水平垂直居中的方法,如有不如,请谅解 <body><div class = &q ...

  8. CSS中实现div元素水平垂直居中

    常用7种实现水平垂直居中方法: 1.行内元素水平垂直居中 2.绝对定位 + margin 3.绝对定位+margin:auto 4.绝对定位 + translate 5.flex 布局 6.flex+ ...

  9. 每日一个css小技巧 6/10 水平垂直居中

    行内元素水平垂直居中 1 常规设置 一句话总结: text-align设置水平居中,line-height = height 设置垂直居中 2 父盒子模拟为表格 块级元素水平垂直居中 1 positi ...

最新文章

  1. JS-DOM-元素节点
  2. Spring AOP编程-aspectJ通知类型-6大通知
  3. Exchange 2007 安裝（-）
  4. php ziparchive自带吗,PHP自带的ZipArchive压缩文件并下载打包好的文件（重要）
  5. DateFormat（炸窝）
  6. 度量时间差和jiffies计数器
  7. mysql面试题2020_2020年MySQL数据库面试题
  8. 计算机美化照片教案,美化你的桌面 教案
  9. 因未交赎金，世界航天巨头机密文档遭勒索软件公开
  10. flutter 自定义键盘_Flutter 引擎架构
  11. Silverlight访问WCF双工通信的官方例子
  12. 用户已关闭隐式函数计算_针对隐式反馈和LightFM模型的杂谈
  13. SpringMVC框架学习上篇
  14. W25Q64 Flash芯片原理与应用方案（含W25Q64中文数据手册）
  15. wps流程图直线上怎么填字_流程图走起！使用WPS文字快速制作美观的流程图
  16. 针对源代码保密源代码安全管理产品选型建议
  17. 七、基础教程-坐标轴（Axis）
  18. 从校训、企业文化到团队文化
  19. 有趣好玩的黑科技网站分享
  20. js 对日期的计算，加减天数

热门文章

  1. Springboot文件上传 百度ocr文字识别提取
  2. 力士乐伺服电机编码器调零_力士乐伺服电机故障与维修排除备份构成
  3. html background缩放,background-size使用详解
  4. Android控件扫光动画,完美起航-AndroidTV控件获得焦点的扫光效果
  5. 多线程处理大文件_Java内存映射，上G大文件轻松处理
  6. 【面试必备】静态路由与配置相关知识点详解
  7. office文件已损坏 该服务器,Office文件可能已损坏处理方法
  8. cpu飙升 死循环_java排查一个线上死循环cpu暴涨的过程分析
  9. qt5 linux 控制台 乱码,qt5.12 解决显示中文乱码问题
  10. 4g通信模块怎么连接sim卡_你好eSIM，再见SIM卡