一 、文字居中 1 固定容器高度的单行文本垂直居中:height=line-height

             2 未知容器高度的文本垂直居中:设定padding,使上下的padding值相同即可

             3 固定容器高度的多行文本垂直居中:让<div>模拟<table>使用vertical-algin

      父容器 #wrap{

              display:table

            }

      子容器 #content{

             vertical-algin:middle;

              display:table-cell;

            }

二 、图片居中 垂直居中一张图片 vertical-align:middle;

三 、

1 html:<div id="parent">
      <div id="child">Content here</div>
      </div>  css :#parent {position: relative;}        #child {       position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%;     }2 html:<div id="parent">       <div id="child">Content here</div>       </div>  css:#parent {padding: 5% 0;}      #child {padding: 10% 0;}

四 、 元素高宽已知.#parent{width:600px;height:400px;position:absolute;left:50%;top:50%;margin-top:-200px;margin-left:-300px;}

五 、 元素高宽未知(使用css3的属性,会出现兼容问题)#parent{ width:600px;height:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

最新文章

  1. sendto频率过快导致发送丢包
  2. 歌词文件解析(二):LRC格式文件的绘制
  3. USB hacker Collection
  4. ActiveMQ发消息和收消息
  5. PB之入门-itemchanged(long row,dwobject dwo,string data)
  6. metaq安装实例
  7. 火车安排问题(dp好题)
  8. 《head first java 》读书笔记(四)
  9. cdh4.1.2 hadoop和oozie集成问题
  10. linux命令行模式下实现代理上网(转)
  11. 鸟哥的linux私房菜学习-(五)Linux系统的在线求助man page与info page
  12. TensorFlow环境 人脸识别 FaceNet 应用(一)验证测试集
  13. mysql添加Federated引擎问题
  14. UnicodeDecodeError: &#39;gbk&#39; codec can&#39;t decode byte 0xae in position 120: illegal multibyte sequence
  15. Python实例---利用正则实现计算器[参考版]
  16. A+B 输入输出练习I
  17. Enterprise Architect 13 : 将绘制的图形导出成图片 或者 拷贝到剪贴板中
  18. EYES组——软件体系结构上机规划
  19. C#存取数据库图片
  20. python 操作solr索引数据

热门文章

  1. C# Winform 自定义控件——竖着的Navbar
  2. 一起来学JavaScript吧(JS兔子领进门)
  3. 自定义markdown代码高亮显示-cnblog
  4. mysql中防止sql注入
  5. 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述
  6. PKI机制总结
  7. 无重复字符的最长子串[双指针+哈希表] LeetCode.3
  8. JVM(十一):内存分配
  9. Collectors.toMap不允许Null Value导致NPE
  10. 操作MySQL-数据库的安装及Pycharm模块的导入