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. 先理解Mask R-CNN的工作原理，然后构建颜色填充器应用
  2. tomcat的server.xml详解
  3. 简明 Python 编程规范v2
  4. datetime 比较_Python 字典中key命中取值的两种方法性能比较！
  5. 5-10多分支网络结构
  6. vue列表排序实现中的this问题
  7. php file_get_contents 效率,php 浅析file_get_contents、curl 的效率和稳定性
  8. B站就机房服务器故障道歉；罗永浩否认将启动自动驾驶项目；​亚马逊收购 Facebook 卫星互联网团队|极客头条...
  9. Dx unsupported class file version 52.0 Conversion to Dalvik format failed with error 1
  10. C语言程序设计谭浩强第五版课后答案
  11. RS-485通信协议(ModBus版)
  12. 如何将数据库文件进行压缩
  13. SpringBoot之下载Excel
  14. CentOS停更；阿里发布全新操作系统（Anolis OS），用后直呼：牛X
  15. c语言打开文件报错 13,求帮忙看一段打开文件的代码~~真心无力了
  16. Python程序员必备的四款开发工具
  17. 万万没想到，最简单的视频编辑软件竟然是知乎？！
  18. html excel 在线编辑,利用js实现在线编辑excel表格代码
  19. Android如何解决文字转语音播报的问题
  20. 求微信小程序开发交流群

热门文章

  1. 排序算法 | 直接插入排序算法的图解、实现、复杂度和稳定性分析
  2. C语言实例第3期：在控制台打印出著名的杨辉三角
  3. 图形学实验之显示一个飞机（C++实现）
  4. 派生类的构造【C++继承】
  5. H. Texas hold'em Poker（2019ICPC区域网络赛沈阳站）
  6. java系统教程_Java 教程(开发环境配置+基础语法)
  7. electron 样式不加载_electron-vue，启动之后没了样式和图片是什么原因呢，请大佬帮忙康康...
  8. c#语言呈现位置信息,c#实现根据网络IP显示地理位置功能示例
  9. java内存分析_java内存分析总结
  10. 深度学习每层的通道数如何计算_模型通道剪枝之DMCP: Differentiable Markov Channel Pruning...