通用

<div id="parent">
<div id="child">Content here</div>
</div>
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
/*低版本 IE fix bug*/
#child {
display: inline-block;
}

定位居中

<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top:;
left:;
height:;
width:;
margin: auto;
}

css 元素垂直居中的更多相关文章

  1. css元素垂直居中

    一.碎碎念:啊啊啊,原谅我只能起一个酱紫微大众微俗气的标题,因为实在没有什么能比这样表达的更清楚直观了呢! 二.没有知识储备,直接上示例: 1.思路:给父元素添加display: table属性:给子 ...

  2. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  3. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  4. CSS元素垂直居中方法总结

    坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...

  5. css元素垂直居中的8中方法

    1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...

  6. css元素垂直居中方法

    1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...

  7. css点滴1—八种方式实现元素垂直居中

    这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...

  8. HTML/CSS:div居中和div内部元素垂直居中(1)

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

  9. CSS布局:元素垂直居中

    CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...

随机推荐

  1. [转]NopCommerce之视图设计

    本文转自:http://blog.csdn.net/hygx/article/details/7324452 Designer's Guide   Contents Overview  概述 Inst ...

  2. window server 2012R2服务器部署遇到的问题

    1. 出现问题原因:服务器的Framework4.5 未安装, 解决办法:从网上下载之后,安装,然后重启服务器即可 2. 出现问题原因:内存不足或者虚拟内存不足 解决办法:设置虚拟内存来解决,步骤如下 ...

  3. 部署ASP.Net Core 2.1 項目到 IIS

    用Asp.net core 2.1 寫了一個小的系統框架,記錄一下部署過程: 1. 首先是安裝 IIS 了,從 控制面板→程序→启用或关闭Windows功能→勾选Internet Informatio ...

  4. vs安装包

    http://blog.csdn.net/cometnet/article/details/19551125

  5. sublime text less安装踩坑图文讲解(less无法生成css)

    唉,怎么感觉做个前端几乎把所有的坑都踩遍了啊,别人按照网上安装了一遍就好使,我这里就死活不行. 先说一下我的问题:网上说的能安装的都按了,可是sublime就是不给我生成css文件,后来知道了,就是l ...

  6. Android学习总结(十八) ———— SQLite数据库使用

    一.基本概念 数据库最经典的四个操作 添加.删除.修改.查找,在处理大量数据的时候使用数据库可以帮我们迅速定位当前须要处理的数据,举个例子 好比现在要实现一个搜索功能 用数据库的话只须要其中一个搜索条 ...

  7. Mybatis-Generator逆向生成Po,Mapper,XMLMAPPER(idea)

    前文有一篇手工生成的说明,地址: http://www.cnblogs.com/xiaolive/p/4874605.html, 现在这个补充一下在idea里面的自动版本的数据库逆向生成工具: 一.g ...

  8. UVA 12563 Jin Ge jin Qu [h] ao 劲歌金曲 (01背包)

    每首只能唱一次,而且中间不能不唱歌,所以先把状态赋值为-1,以区别合法状态和非法状态,在唱歌曲目最多的条件下,离开时间应该尽量晚. 状态定义f[i][j]考虑前i首歌唱歌时间为j的最大唱歌曲目 #in ...

  9. 如何解决webpack中css背景图片的绝对地址

    在项目开发中,一般写相对路径是没有问题的,但是在项目比较大的情况下,我的scss文件可能为了方便管理,会放在不同的文件夹下,有的可能又不需要放在文件夹下,比如我的scss文件结构如下: module ...

  10. VC-基础:关于一些符号的意义

    GUI应用程序:Graphic User Interface图形 用户 接口 SDI:单文档程序(典型的记事本就是SDI) MID:多文档程序(比如VS2008默认就是多文档的)