通用

<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. Unix高级编程之文件权限

    1.访问权限表 st_mode 意义 S_IRUSR 用户-读 S_IWUSR 用户-写 S_IXUSR 用户-执行 S_IRGRP 组-读 S_IWGRP 组-写 S_IXGRP 组-执行 S_IR ...

  2. Codeforces Round #250 (Div. 1)

    这几次CF都挺惨.. A 没条边权设为两端点的最小点权,最后加起来. 数组开小,WA一次 #include <iostream> #include<cstdio> #inclu ...

  3. hdu4553约会安排(线段树区间合并)

    链接 poj3667的加强版 当时的题解 这里只不过对于女神需要另开算,DS的占用的时间不加在女神身上,女神的时间都要加,清空的时候也都要算. #include <iostream> #i ...

  4. YDKJ 读书笔记 01 Function vs. Block Scope

    Introduction 本系列文章为You Don't Know JS的读书笔记. 书籍地址:https://github.com/getify/You-Dont-Know-JS Scope Fro ...

  5. bootstrap 滚动监听 标签页 和 工具提示

    标签   <div class="container">     <h4>Tabs</h4>     <ul id="myTab ...

  6. 在PaaS上开发Web、移动应用(2)

    在PaaS上开发Web.移动应用(2) PaaS学习笔记目录 PaaS基础学习(1) 在PaaS上开发Web.移动应用(2) PaaS优点与限制(3) 6. 巨型代码,是指持续不断地向一个应用程序添加 ...

  7. android sdk更新失败的解决方法

    [解决方法] 选择Tools-Options,在弹出的设置窗口中,「HTTP Proxy Server」和「HTTP Proxy Port」输入框内填入mirrors.neusoft.edu.cn和8 ...

  8. SQLServer查询耗时sql语句

    qs.total_worker_time/qs.execution_count as [Avg CPU Time], , ( ) as query_text, qt.dbid, dbname=db_n ...

  9. COGS 2566. [51nod 1129] 字符串最大值

    ★★★   输入文件:string_maxval.in   输出文件:string_maxval.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 一个字符串的前缀是指包 ...

  10. 如何让Sublime Text编辑器支持新的ABAP关键字

    ABAP 7.40推出了许多新的关键字 - keyword,您的Sublime Text可能无法针对这些新关键字实现期望的语法高亮显示(syntax highlight)或者自动完成(auto com ...