使用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. 【洛谷 P3834】 可持久化线段树1（主席树）

    题目链接 主席树=可持久化权值线段树. 如果你不会可持久化线段树,请右转 如果你不会权值线段树,请自行脑补,就是线段树维护值域里有多少个数出现. 可持久化线段树是支持查询历史版本的. 我们对每个数都进 ...

  2. ANDROID开发笔记(一)

    manifest, 英['mænɪfest] vt. 显示,表明;证明;使显现 adj. 明白的,明显的 n. 货单,旅客名单 wrap_content, 根据实际内容调整   原来新版的ADB已经支 ...

  3. Hadoop运维记录系列

    http://slaytanic.blog.51cto.com/2057708/1038676 Hadoop运维记录系列(一) Hadoop运维记录系列(二) Hadoop运维记录系列(三) Hado ...

  4. JQ面向对象

    静态方法:某种类型才有的方法,这个方法干的事情只有类型本身有关,不受具体实例对象的影响,在C#语言中,它用static表示,VB中用share表示,而在jq中我们一般用$或者JQuery表示JQ类型, ...

  5. docker从零开始网络（二）桥接网络

    使用桥接网络 在网络方面,桥接网络是链路层设备,它在网络段之间转发流量.桥接网络可以是硬件设备或在主机内核中运行的软件设备. 就Docker而言,桥接网络使用软件桥接器,该软件桥接器允许连接到同一桥接 ...

  6. hdu 1513(滚动数组)

    Palindrome Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  7. Python 进阶 之 traceback模块

    Traceback模块官方英文描述: Help on module traceback: NAME traceback - Extract, format and print information ...

  8. spark热点互动问答

    [Spark亚太研究院 决战云计算大数据时代 100期公益大讲堂 互动问答] Q1:我想问,hdfs的namenode挂了,怎么处理? 使用ZooKeeper: 使用Mesos: 使用Yarn: Q2 ...

  9. 【转】SonarQube配置自定义的CheckStyle代码规则

    原文地址:https://www.jianshu.com/p/ff1d800885ce 惯例第一步肯定是SonarQube的安装与运行配置了,但这部分不在本文主题内,网上一搜一大把,这里就不讲了,大家 ...

  10. ng2-admin安装问题

    问题一 启动项目出现如下error: 原理: 暂不清晰, 目前认为是项目本身的问题. 项目作者在博文中给出了相应的解决方案. 具体解决方案: 如果之前装过angular-cli需要先卸载:npm un ...