<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. [No0000AA]Windows 系统环境变量列表

    环境变量 详细信息 %ALLUSERSPROFILE% 所有用户 Profile 文件位置 %APPDATA% 应用程序数据的默认存放位置 %CD% 当前目录 %CLIENTNAME% 联接到终端服务 ...

  2. 配置VSCode右键菜单

    修改注册表,添加鼠标右键 选择文件 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\VSCode]@="Ope ...

  3. [LeetCode] Populating Next Right Pointers in Each Node II 每个节点的右向指针之二

    Follow up for problem "Populating Next Right Pointers in Each Node". What if the given tre ...

  4. html5 自定义标签取值

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. redis配置文件详解

    基于redis2.4版本的配置文件. # 注意单位问题:当需要设置内存大小的时候,可以使用类似1k.5GB.4M这样的常见格式:## 1k => 1000 bytes# 1kb => 10 ...

  6. jQuery 模态对话框示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 多线程之异步编程: 经典和最新的异步编程模型, IAsyncInfo 与 Task 相互转换

    经典的异步编程模型(IAsyncResult) 最新的异步编程模型(async 和 await) 将 IAsyncInfo 转换成 Task 将 Task 转换成 IAsyncInfo 示例1.使用经 ...

  8. javascrip for 循环数组事件绑定

    //radio选择填充,字段 var radioArray = ["F_RegisterCode", "F_Subjection", "F_Mecha ...

  9. C#微信公众平台接入示例代码

    http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 这是微信公众平台提供的接入指南.官网只提供了php的示例代码 ...

  10. ng-class结合三目运算

    ng-class文档:https://docs.angularjs.org/api/ng/directive/ngClass 但是在实际项目中可能会用到三目运算,实例如下: <ul> &l ...