css 元素垂直居中
通用
<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 元素垂直居中的更多相关文章
- css元素垂直居中
一.碎碎念:啊啊啊,原谅我只能起一个酱紫微大众微俗气的标题,因为实在没有什么能比这样表达的更清楚直观了呢! 二.没有知识储备,直接上示例: 1.思路:给父元素添加display: table属性:给子 ...
- [转]-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 ...
- CSS 元素垂直居中的 6种方法
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...
- CSS元素垂直居中方法总结
坚持,坚持,坚持... 以上为自我鼓励,哈哈... ------------------------------------------------- 相信没有真正是尝试过的人应该都和我一样,觉得居中 ...
- css元素垂直居中的8中方法
1. 通过vertical-align:middle实现CSS垂直居中 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
- css元素垂直居中方法
1.Line-height 适用情景:单行文字垂直居中技巧 这个方式应该是最多人知道的了,常见于单行文字的应用,像是按钮这一类对象,或者是下拉框.导航此类元素最常见到的方式了.此方式的原理是在于将单行 ...
- css点滴1—八种方式实现元素垂直居中
这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...
- HTML/CSS:div居中和div内部元素垂直居中(1)
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- CSS布局:元素垂直居中
CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现垂直居中的多种方法及简单原理 Tip:下文中说的适用场景只是举了几个简单的例子方便读者理解.实际应用场景太复杂,生搬硬套容易出错.最重要的是掌握 ...
随机推荐
- Elasticsearch之探索集群信息
REST API 启动并运行了节点和集群,下一步是了解如何与它进行通信.elasticsearch提供了一个非常全面和强大的REST API,可以使用它与集群进行交付. 使用API完成以下: • 检查 ...
- ubuntu管理apt包的常用命令
安装 apt-get install nginx #安装 apt-get install nginx --reinstall #重新安装 删除 apt-get remove nginx #卸载 apt ...
- HDU 3117 Fibonacci Numbers 数学
http://acm.hdu.edu.cn/showproblem.php?pid=3117 fib是有一个数学公式的. 这里的是标准的fib公式 那么fib = 1 / sqrt(5) * ((1 ...
- HackerRank Super Six Substrings dp
https://www.hackerrank.com/contests/hourrank-18/challenges/super-six-substrings 能被6整除的数有一个特点,就是能同时被3 ...
- Yii2 之 UrlManager 实践 (一)
1. enablePrettyUrl yii2默认不支持类似 http://<domain>/site/error 的url格式,需要在config.php中启用 enablePrett ...
- pm2日志切割
此为pm2 日志按每天切割的示例 1.在crontab里添加定时任务 * * * >& 2.cutlog.sh 代码内容 #!/bin/bash CURPATH="/var/l ...
- 总结一下最近对nodejs 和 mongodb 的学习
NodeJs 从最开始的node的安装开始...刚开始安装的时候就遇到了坑... 一开始选用的是brew 的安装方式,安装的版本太低了!现在已经是8.9了,后来,mac直接去官网下载了一个安装包就安装 ...
- codevs 2277 爱吃皮蛋的小明(水题日常)
时间限制: 1 s 空间限制: 32000 KB 题目等级 : 白银 Silver 题目描述 Description 小明特别爱吃蛋,特别是皮蛋.他一次可以吃一个蛋或者两个蛋(整个吞下去),而且他 ...
- maven打包错误:No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?
[INFO] Scanning for projects...[INFO] ...
- JAVA 数据库编程中的性能优化
1. 禁止自动提交:在默认情况下,程序执行的任何sql 语句都是自动提交的向一个表中插入2000条记录,自动提交所用的时间 11666毫秒禁止自动提交(显示提交) 3450毫秒 2. 批处理:多用批 ...