使用display:table 垂直居中需要结合display:table-cell; 和vertical-align:middle;

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>table</title>

    <style type="text/css">

    .out{

    border:1px solid #;

    height:300px;

    display:table;

    }

    .inner{display:table-cell;

    vertical-align:middle;

    }

    </style>

</head>

<body>

<div class="out">

<div class="inner">

sdfsfsdfsfsfsfsfs

</div>

</div>

</body>

</html>

效果就类似于表格里面的单元格居中

<table width="100%%" border="1">

  <tr>

    <th height="276" valign="middle" scope="col">ssss</th>

  </tr>

</table>

CSS：display:table的更多相关文章

  1. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  2. CSS：display:none的使用注意事项

    ​总结:display:none  属性会使元素完全隐藏,js无法获得元素,通过js设置style.display="inline-block" 后 js才可获得此元素的属性和内容 ...

  3. css：display：grid布局

    简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式.如我们所知,CSS 总是用于网页的样式设置,但它并没有起到 ...

  4. HTML/CSS：display:flex 布局教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  5. CSS：display:flex详解

    水平居中很容易实现,但是一般垂直居中好像不是很好实现,一般我们都会用position.left等等进行定位:但是flex很好的解决了这个问题 Flex就是"弹性布局",现在应用很多 ...

  6. css：子元素div 上下左右居中方法总结

    最近在面试,不停地收到了知识冲击,尤其是对于一些基础的css.html.js问题居多,所以自我也在做反思,今天就css问题,如何让一个子元素div块元素上下左右居中 (以下总结方法,都已得到验证). ...

  7. display:table和display:table-cell的妙用

    display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...

  8. HTML/CSS：div水平与元素垂直居中（2）

    单个div水平居中:设置margin的左右边距为自动 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中 ...

  9. HTML/CSS：div居中和div内部元素垂直居中（1）

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

随机推荐

  1. bzoj3223 文艺平衡树 codevs3303 翻转区间

    splay模版题吧 只有区间翻转 至于为什么要把须翻转区间旋到根 因为查找一个区间可以先找出他左端点左边第一个点和右端点x右边第一个点y 然后将x旋到根节点 y旋到x的右儿子 这样x的右边的点就是所有 ...

  2. AWS Ubuntu部署EMQTT的小坑

    Redis身份认证中的 is_superuser 表示不查检用户密码和ACL规则 如果是Ubuntu,集群设置节点名须改为:ubuntu@私有Ip,安全组最好相互开放所有端口 如果使用了ELB,EMQ ...

  3. [ python3 ] 基于zabbix 自动生成xlsx监控文档

    准备做一个每周自动的巡检报告,数据来源于zabbix,通过python读取zabbix数据库获取数据并制作成excel表格, 本来打算直接邮件发送到指定邮箱,但是都被SMTP过滤掉了,试过126和QQ ...

  4. javascript字符串中包含特殊字符问题

    我们都知道,在javascript中,字符串写在单引号或者双引号之中.因为这种要求,我们有些时候一些需要的字符串不能够被javascript解析,如下: "We are "Huma ...

  5. 《Java编程思想》笔记 第五章 初始化与清理

    1.构造器 因为创建一个类的对象构造器就会自动执行,故初始化某些东西特好 2.方法重载 方法名相同,参数列表不同. 2.1 区分重载方法 方法重载后区别不同方法的就是方法签名 -->参数类型和个 ...

  6. [转]CreateDIBitmap与CreateDIBSection

    首先明确最主要区别:CreateDIBitmap创建的是设备相关位图句柄 - HBITMAP.                               CreateDIBSection创建的是设备 ...

  7. Tomcat的类加载机制

     一个功能健全的Web服务器,要解决如下几个问题: 部署在同一个服务器上的两个Web应用程序使用的Java 类库可以实现相互隔离.不能要求一个类库在一个服务器中只有一份,服务器应当保证两个应用程序的类 ...

  8. 提取windows用户明文密码

    前段时间mimikatz热传,主要是因为可以直接提取当前登录用户明文密码. 其实,有个更厉害的神器,无需那么多命令操作,一个命令搞定: C:\>wce -w WCE v1.3beta (Wind ...

  9. 实现用http上传文件，用ftp下载文件

    1.ftp配置 1.检查安装vsftpd软件 使用如下命令#rpm -qa |grep vsftpd可以检测出是否安装了vsftpd软件, 如果没有安装,使用YUM命令进行安装. 2.启动服务 使用v ...

  10. 整数快速乘法/快速幂+矩阵快速幂+Strassen算法

    快速幂算法可以说是ACM一类竞赛中必不可少,并且也是非常基础的一类算法,鉴于我一直学的比较零散,所以今天用这个帖子总结一下 快速乘法通常有两类应用:一.整数的运算,计算(a*b) mod c  二.矩 ...