通用

<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. [已读]JavaScript DOM高级程序设计

    08年出版,但是不得不说内容很好,正如书名,重点是DOM部分,看的还蛮早的,这本,记得是13年.

  2. 操作messageBox类

    我们经常操作messagebox类,有时候我们又分不清一些参数,下面是一些操作messageBox的常用方法: public static class ClsMsg { public static v ...

  3. springJDBC 事物隔离

    五.Spring-jdbc的实现 第一步:导jar包 pom.xml <!--引入spring-beans节点--><dependency>    <groupId> ...

  4. Solr6+IKAnalyzer分词环境搭建

    环境要求 Zookeeper版本:zookeeper-3.4.8 JDK版本: jdk1.8. Solr版本:solr-6.4.1 Tomcat版本:tomcat8 ZK地址:127.0.0.1:21 ...

  5. mount_cd9660:/dev/acd0: Input/output error

    mount -t cd9660 /dev/acd0 /cdrom g_vfs_done():acd0[READ(offset32768, length=204]error =5 mount_cd966 ...

  6. 更改IDEA默认使用JDK1.5编译项目

    在使用IDEA编译项目时,总是提示我编译失败,有些功能是在1.5之后的版本才支持.废了好大的功夫才编译成功.下面呢,就是更改编译的过程了! 一.初步更改 使用快捷键Ctrl+Alt+Shift+S打开 ...

  7. IOS自动化测试之UIAutomation

    通过Xcode工具编写运行测试脚本 1.当你有了一个应用的源代码之后,在Xcode工具中,首先选中被测应用,然后点击菜单栏中的“Product-Profile”,则会弹出Instruments工具,在 ...

  8. 洛谷 P2353 背单词

    题目背景 小明对英语一窍不通,令老师十分头疼.于是期末考试前夕,小明被逼着开始背单词…… 题目描述 老师给了小明一篇长度为N的英语文章,然后让小明背M个单词.为了确保小明不会在背单词时睡着,老师会向他 ...

  9. Java异常处理:如何写出“正确”但被编译器认为有语法错误的程序

    文章的标题看似自相矛盾,然而我在"正确"二字上打了引号.我们来看一个例子,关于Java异常处理(Exception Handling)的一些知识点. 看下面这段程序.方法pleas ...

  10. C++通讯录

    C++通讯录1.0 历时一天,终于把通讯录写好了. 项目要求: 编写一个通讯录管理程序. 有一已存在的通讯录文件,数据内容为各联系人信息. 每个联系人信息的组成部分为: 姓名.电话号码和住址 等个人基 ...