<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. codevs 1080 线段树点修改

    先来介绍一下线段树. 线段树是一个把线段,或者说一个区间储存在二叉树中.如图所示的就是一棵线段树,它维护一个区间的和. 蓝色数字的是线段树的节点在数组中的位置,它表示的区间已经在图上标出,它的值就是这 ...

  2. Linux程序包管理.md

    rpm 简介 RPM包管理员(简称RPM,全称为The RPM Package Manager)是在Linux下广泛使用的软件包管理器.RPM此名词可能是指.rpm的文件格式的软件包,也可能是指其本身 ...

  3. [LeetCode] LRU Cache 最近最少使用页面置换缓存器

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  4. LISA介绍及其使用方法

    LISA是ARM公司开发的一款开源工具.在内核开发过程中,苦于无法针对修改内容进行一些量化或者可视化结果的测量,而无感.LISA对于模型调优,回归测试都有较强的支持. 什么是LISA? LISA是Li ...

  5. DataTable转List

    Invoke : DataTableToList<City>.ConvertToModel(ds.Tables[0]).ToList<City>(); using System ...

  6. ubuntu中pycharm安装激活第二种方法的密钥

    43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNza WduZWVOYW1lIjoi ...

  7. UltralEdit 替换tips

    UltralEdit的字符串替换,简直是编辑器的神来之笔! 可以通过 搜索--〉替换 菜单调出,也可以使用 Ctrl+R 快捷键 下面来看字符的表示吧: tab可以直接Tab键(可能不成功,因为被用作 ...

  8. 附加属性出现Failed to assign to property的问题

    找了半天资料,最后发现把保护附加属性的类加上public就行了

  9. eclipse运行没问题,tomcat以脚本启动后插入数据库的中文会乱码

    记一次部署工程的时候遇到的问题 部署war包到win7的时候发现,布上去后插入数据库的中文会乱码,然后发现用eclipse运行源码没问题,一开始以为是war打出来的时候编码错误,然后将eclipse的 ...

  10. mysql 创建存储过程报错

    在创建存储过程前把结束符定义为 delimiter // 然后再创建就不会报错