使用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. [ CodeVS冲杯之路 ] P2492

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/2492/ 在此先orz小胖子,教我怎么路径压缩链表,那么这样就可以在任意节点跳进链表啦(手动@LCF) 对于查询操作,直 ...

  2. winds dlib人脸检测与识别库

    在人脸检测与人脸识别库中dlib库所谓是非常好的了.检测效果非常ok,下面我们来了解一下这个神奇的库吧! 第一步我们首先学会安装:dlib ,winds+pytho3.6.5  Windows不支持p ...

  3. python脚本运行的几种方式

    1.脚本式编程 将如下代码拷贝至 hello.py文件中: print ("Hello, Python!"); 通过以下命令执行该脚本: $ python ./hello.py h ...

  4. 安全测试===Mysql 注入技巧学习 MySQL注入技巧（2）

    原文地址:http://websec.files.wordpress.com/2010/11/sqli2.pdf 0x00.介绍 也可以参考瞌腄龙的mysql注入科普:http://drops.woo ...

  5. 本地搭建SVN局域网服务器【转】

    转自:http://blog.csdn.net/sunbaigui/article/details/8466310 参考链接:http://tortoisesvn.net/docs/nightly/T ...

  6. 【洛谷P1343】地震逃生

    一道傻吊的网络流题,wori我写的读入优化怎么老T? 远离读入优化报平安? #include<bits/stdc++.h> #define N 4005 #define inf 10000 ...

  7. KVM(二)CPU 和内存虚拟化

    1. 为什么需要 CPU 虚拟化 X86 操作系统是设计在直接运行在裸硬件设备上的,因此它们自动认为它们完全占有计算机硬件.x86 架构提供四个特权级别给操作系统和应用程序来访问硬件. Ring 是指 ...

  8. 详解Python中的__new__、__init__、__call__三个特殊方法(zz)

    __new__: 对象的创建,是一个静态方法,第一个参数是cls.(想想也是,不可能是self,对象还没创建,哪来的self)__init__ : 对象的初始化, 是一个实例方法,第一个参数是self ...

  9. 实例解析嵌套的JSON格式数据

    关于JSON数据格式的基本知识和概念,参看: http://www.cnblogs.com/zouzf/archive/2012/03/31/2426646.html <span style=& ...

  10. 使用 URLDecoder 和 URLEncoder 对统一认证中的http地址转义字符进行处理

    import java.io.UnsupportedEncodingException; import java.net.URLDecoder; import java.net.URLEncoder; ...