<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. JS中typeof与instanceof的区别

    JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: Typeof typeof 是一个一元运算,放在一个运算数之前 ...

  2. POJ 2391 Ombrophobic Bovines

    Ombrophobic Bovines Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 18623   Accepted: 4 ...

  3. noip2016十连测题解

    以下代码为了阅读方便,省去以下头文件: #include <iostream> #include <stdio.h> #include <math.h> #incl ...

  4. [LeetCode] Sqrt(x) 求平方根

    Implement int sqrt(int x). Compute and return the square root of x. 这道题要求我们求平方根,我们能想到的方法就是算一个候选值的平方, ...

  5. 20145222《信息安全系统设计基础》Linux常用命令汇总

    学习Linux时常用命令汇总 通过Ctrl+f键可在该网页搜索到你想要的命令. Linux中命令格式为:command [options] [arguments] //中括号代表是可选的,即有些命令不 ...

  6. JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue ...

  7. Extjs 下拉框显示远程数据

    var store = new HT.SyncStore({ baseParams : { itemName : '绩效考核_任务状态' }, url : __ctxPath + '/system/l ...

  8. 从list表单序列化后的值转成标准json

    var json = {"name":["1111","222"],"sex":["男"," ...

  9. 百度文库下载器 V2.3.4.3 支持豆丁百度文库道客巴巴

    支持豆丁百度文库道客巴巴免下载劵财富值导出word 下载地址: http://pan.baidu.com/s/1qYCmQde

  10. javadoc

    Oracle官方javadoc说明 Generates HTML pages of API documentation from Java source files. http://docs.orac ...