<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. 机器学习实战笔记--k近邻算法

    #encoding:utf-8 from numpy import * import operator import matplotlib import matplotlib.pyplot as pl ...

  2. Cookie和Session的那些事儿

    Cookie和Session都是为了保持用户的访问状态,一方面为了方便业务实现,另一方面为了简化服务端的程序设计,提高访问性能.Cookie是客户端(也就是浏览器端)的技术,设置了Cookie之后,每 ...

  3. 三石推荐！把 Bootstrap 小清新带回家！

    无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion   喜欢就来赞一个! 把麻烦留给三石 ...

  4. Gulp 入门

    1. 安装 Node 环境 参考 http://www.cnblogs.com/zichi/p/4627728.html,注意一起安装 npm 工具,并把路径保存到环境变量中(安装过程中会有提醒) 安 ...

  5. windows批处理运行java程序

    明确需求 今天你编了一个java swing版照片查看器,想让计算机上的所有照片默认打开方式都改成你的照片查看器. 使用工具软件 很多工具软件都是不把jre打包到exe中的,这就是说打包之后的exe只 ...

  6. 【C#】透屏幕，屏幕扩展

    if (!SCREEN_STATE) { ) { System.Windows.Forms.Screen s2 = System.Windows.Forms.Screen.AllScreens[]; ...

  7. Ext动态加载Toolbar

    在使用Ext的GridPanel时候,有时候需要面板不用重新加载而去更新Store或者Toolbar,Store的方法有很多,例如官方api给我们提供的Store.load(),Store.reLoa ...

  8. mybatis判断传入list大小

    <if test="tenantIds.size() > 0"> AND A.PROC_TARGET_ID IN <foreach collection=& ...

  9. Jmeter学习笔记TWO

    使用非GUI模式运行Jmeter脚本并自动生成测试报告 命令:jmeter -n -t tougu.jmx -l result.jtl -e -o /tmp/ResultReport 这个命令是用于执 ...

  10. android studio 提示翻译

    1. you can import your settings from a previous version of Studio可以导入您的设置从先前版本的工作室 2. I want to impo ...