使用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. [BZOJ2453]维护队列|分块

    Description 你小时候玩过弹珠吗? 小朋友A有一些弹珠,A喜欢把它们排成队列,从左到右编号为1到N.为了整个队列鲜艳美观,小朋友想知道某一段连续弹珠中,不同颜色的弹珠有多少.当然,A有时候会 ...

  2. SQLSERVER数据库置疑、可疑、脱机、单用户、紧急模式等的修复

    数据库出现置疑.可疑.脱机.单用户.紧急模式主要是因为数据库的日志文件除了问题,2000和2008修复方式不一样,2008的修复脚本在2000中不适用,主要是不被2000识别. 假设数据库名为:eis ...

  3. Django【进阶】信号

    -信号 Django中提供了“信号调度”,用于在框架执行操作时解耦.通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者.   问题:如何对所有数据库添加操作进行日志记录? 问题:信 ...

  4. 2.RDD的基本操作

    有些时候,我不太喜欢介绍相关概念什么的(其实是你懒吧),而是喜欢直接介绍用法. 所以RDD是什么这里也不再介绍了,可以自行百度,下面直接介绍rdd的一些操作 from pyspark import S ...

  5. python 如何将JSON数据原封不动的转为字符串(顺序不能变动)?

    最好是采用 OrderedDict + json.dumps方案 1. 在存储 content 的时候就使用 OrderedDict 而非用默认的 dict from collections impo ...

  6. 利用beamer做幻灯片插入EPS图片的方法

      可以利用epstopdf宏包,在命令行下利用pdflatex带"-shell-escape"参数编译. 先插入epstopdf宏包:\usepackage{graphicx}\ ...

  7. [BZOJ1492] [NOI2007]货币兑换Cash 斜率优化+cdq/平衡树维护凸包

    1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 5907  Solved: 2377[Submit][Sta ...

  8. [libgdx游戏开发教程]使用Libgdx进行游戏开发(9)-场景过渡

    本章主要讲解场景过渡效果的使用.这里将用到Render to Texture(RTT)技术. Libgdx提供了一个类,实现了各种常见的插值算法,不仅适合过渡效果,也适合任意特定行为. 在本游戏里面, ...

  9. crontab执行python报错原因总结

    1.相对路径导致   2.环境变量问题,py脚本首行应指定python路径,不能用软链接   3.python3.3是默认utf-8,需要 &&脚本   最好使用crontab -e ...

  10. centos 命令行修改主机名

    # vi /etc/sysconfig/network # 把localhost.localdomain 修改为 localhost.com # 保存退出 # vi /etc/hosts # 把loc ...