<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. [bzoj2588][count on a tree] (主席树+lca)

    Description 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始 ...

  2. 理解HTML语义化

    1.什么是HTML语义化? <基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等> 根据内容的结构化(内容语义化),选择合适的标签(代码语义 ...

  3. salt源码安装软件和yum安装软件

    上面简单列出了源码安装的sls文件书写思路. 涉及到一些固定的思路:如, 1,拷贝 解压安装时候需要依赖tar.gz存在 如果已安装则无需再次安装. 2,启动脚本 加入chk时候需要文件存在,如果已添 ...

  4. HTML <meta> 标签，搜索引擎

    关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.asp meta标签作用 META标签是HTML标记HEA ...

  5. ubuntu中phpmyadmin密码忘记

    在安装mysql时,默认只让你设置了root的密码,如果root的密码忘记,处理办法如下 第一步: 这时你需要进入/etc/mysql目录下,然后sudo vim/vi debian.cnf查看里面的 ...

  6. 怎么用XMind辅助电商工作

    随着电商的迅猛发展,突出了电商运营管理的重要性.能不能做好电商,就要看他的管理做的好不好,全面不全面!电商的突破与进步,离不开全方位的协同管理.之前,小编有给大家介绍过电商量化管理的四大利器:XMin ...

  7. Centos7 下面安装 MySql 客户端

    Workench 是官发发布的Mysql客户端,是Linux下面比较通用的了, 如果使用X界面,可以试着熟悉下. 下载链接: http://cdn.mysql.com//Downloads/MySQL ...

  8. Android测试基础题(三)

    今天接着给大家带来的是Android测试基础题(三).    需求:定义一个排序的方法,根据用户传入的double类型数组进行排序,并返回排序后的数组 俗话说的好:温故而知新,可以为师矣 packag ...

  9. Android——WebView

    WebView用途 通过Intent调用系统浏览器: 引言: Uri uri = Uri.parse(url);//url为你要链接的地址 Intent intent = new Intent(Int ...

  10. C#并发编程

    并发编程,一直是小白变成(●—●)的一个坎.平时也用到过不少并发编程操作,在这里进行一下记录. 多线程并不是唯一 并发:同时做多件事情. 多线程:并发的一种形式,采用多线程来执行程序. 并行处理:把正 ...