<html>

<head>

<style>

.vcenter {

position: relative;

height: 100%;

width:50px;

}

.vcenter-child {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

width: 100%;

margin: auto;

display: table;

text-align: center;

}

</style>

</head>

<body>

<div class="vcenter">

        <div class="vcenter-child">vertical-centering, 我要垂直居中vertical-centering, 我要垂直居中</div>

    </div>

</body>

</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. Maven与Ant比较

    Maven与Ant比较 0 « 上一篇:Jenkins学习三:介绍一些Jenkins的常用功能» 下一篇:Jenkins学习四:Jenkins 邮件配置 posted @ 2015-03-25 16: ...

  2. [LeetCode] Intersection of Two Arrays 两个数组相交

    Given two arrays, write a function to compute their intersection. Example:Given nums1 = [1, 2, 2, 1] ...

  3. [LeetCode] Counting Bits 计数位

    Given a non negative integer number num. For every numbers i in the range 0 ≤ i ≤ num calculate the ...

  4. 网络切片在5G中的应用

    SDNLAB君 • 16-11-25 •1509 人围观 5G和网络切片 当5G被广泛提及的时候,网络切片是其中讨论最多的技术.像KT.SK Telecom.China Mobile.DT.KDDI. ...

  5. mysql函数大全

    对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str) 返回字符串str的最左面字符的ASCII代码值.如果str是空字符串,返回0.如果str是NULL,返回NULL. mysql& ...

  6. RecycleView 实现多布局

    最近的一个新需求,简单描述下吧: 需求: 目标样式如图所示,我们需要根据需求动态添加网关和设备. 目标有了下面就是怎么实现了.首先我们选用的是RecycleView 那么主要目标就成了 在recycl ...

  7. ERwin创建逻辑模型

    1.逻辑实体添加非主键属性的三种的方式 属性1:在图中直接创建 属性2:在模型导航器中创建 属性3:在属性对话框中创建 2.实体显示选项(Entity Display) Rolename/Attrib ...

  8. CodeForces - 274B Zero Tree

    http://codeforces.com/problemset/problem/274/B 题目大意: 给定你一颗树,每个点上有权值. 现在你每次取出这颗树的一颗子树(即点集和边集均是原图的子集的连 ...

  9. memcache占用CPU过高的解决办法

    Simon最近为公司服务器操碎了心 , 先是mysqld进程占用CPU过高 , 导致服务器性能变低 ,网站打开太慢.通过增加max_connections及table_cache解决了问题 ,随后发现 ...

  10. (转)C# Enum,Int,String的互相转换 枚举转换

    Enum为枚举提供基类,其基础类型可以是除 Char 外的任何整型.如果没有显式声明基础类型,则使用 Int32.编程语言通常提供语法来声明由一组已命名的常数和它们的值组成的枚举. 注意:枚举类型的基 ...