1. 　　
  2.  
  3. <html>
  4. <head>
  5. <style>
  6. .vcenter {
  7. position: relative;
  8. height: 100%;
  9. width:50px;
  10. }
  11. .vcenter-child {
  12. position: absolute;
  13. top: 0;
  14. right: 0;
  15. bottom: 0;
  16. left: 0;
  17. width: 100%;
  18. margin: auto;
  19. display: table;
  20. text-align: center;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div class="vcenter">
  26.         <div class="vcenter-child">vertical-centering, 我要垂直居中vertical-centering, 我要垂直居中</div>
  27.     </div>
  28. </body>
  29. </html>

　　

CSS实现可变行数垂直居中的更多相关文章

  1. css 单行/多行文字垂直居中问题

    例子可以直接看这里http://www.zhangxinxu.com/study/200911/line-height-text-v-center.html 这篇文章中有一点点解释http://blo ...

  2. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  3. css布局-多行文字垂直居中

    方法一: 代码: <style> *{padding: ;margin:;font-size: 12px;} div{float: left;width: 200px;height:200 ...

  4. 纯CSS实现多行文字垂直居中几种方法解析

    场景:父元素 高度固定,如何使其中的文字垂直居中? 1.table布局: 利用display:table+display:table-cell的方法 <!DOCTYPE html> < ...

  5. css 超出规定行数自动隐藏

     单行overflow: hidden;text-overflow: ellipsis;white-space: nowrap;  多行(兼容各个浏览器)//通过覆盖最后几个字的形式p{positio ...

  6. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  7. line-height超出隐藏显示的行数和垂直居中

    line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...

  8. css让文字显示特定行数，多余的显示省略号

    /*css*/ .p{ width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; /** ...

  9. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

随机推荐

  1. Checkstyle：整洁你的代码

    内容 Checkstyle简介 下载 Checkstyle的几种使用方式 1) 与Ant结合使用 2) 通过CLI使用 3)在IDE上使用插件 4)在Maven上使用插件 Checkstyle配置 配 ...

  2. THINKPHP源码学习--------验证码类

    TP3.2验证码类的理解 今天在学习中用到了THINKPHP验证码,为了了解究竟,就开始阅读TP验证码的源码. 源码位置:./ThinkPHP/Library/Think/Verify.class.p ...

  3. [No0000A2]“原始印欧语”（PIE）听起来是什么样子？

    "Faux Amis"节目中经常提到"原始印欧语"(PIE)——"Proto-Indo-European". 我们说过,英语,法语中的&qu ...

  4. js中避免函数名和变量名跟别人冲突

    待补充 .... 参考链接: http://blog.csdn.net/formyqianduan/article/details/52118690

  5. [LeetCode] Kth Smallest Element in a BST 二叉搜索树中的第K小的元素

    Given a binary search tree, write a function kthSmallest to find the kth smallest element in it. Not ...

  6. 请求如何进入ASP.NET MVC框架

    一.前言 对于WebForm开发,请求通常是一个以.aspx结尾的url,对应一个物理文件,从代码的角度来说它其实是一个控件(Page).而在MVC中,一个请求对应的是一个Controller里的Ac ...

  7. Maven的pom报maven-surefire-plugin:pom:2.12.4

    新建Maven项目,报错: Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from htt ...

  8. jqGrid jqGrid分页参数+条件查询

    HTML <div class="row"> <div class="col-sm-20"> <form id="for ...

  9. 冰冻三尺非一日之寒--jQuery

    第十七章     jQuery          http://jquery.cuishifeng.cn/ 一.过滤选择器: 目的:处理更复杂的选择,是jQuery自定义的,不是CSS3中的选择器. ...

  10. 【USACO 3.2】Sweet Butter（最短路）

    题意 一个联通图里给定若干个点,求他们到某点距离之和的最小值. 题解 枚举到的某点,然后优先队列优化的dijkstra求最短路,把给定的点到其的最短路加起来,更新最小值.复杂度是\(O(NElogE) ...