<style>

    .sty1 {

        width: 300px;

        height: 200px;

        background-color: black;

        text-align: center;

        color: white;

        font-size: 30px;

        margin: 20px auto;

    }

    .sty2 {

        display: -webkit-flex;

        display: flex;

        -webkit-align-items: center;

        align-items: center;

        -webkit-justify-content: center;

        justify-content: center;

    }

</style>

<body>

    <div class="sty1 sty2">

        this is title

    </div>

</body>

效果：

CSS文本垂直居中显示的更多相关文章

  1. css文本垂直居中的实现

    本案例已经有新的比较简便的解决方案,可以直接采用 vertical-align:middle 样式对行内元素进行垂直居中布局,详见: 微信小程序开发——如何让商品标题类文本根据内容长度垂直居中. 以下 ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. CSS 文本垂直居中对齐

    文本垂直居中对齐是一个很常见的问题,这里总结一下. 一.容器高度固定,单行文本垂直居中对齐 height:20px; line-height:20px; overflow:hidden; 二.容器高度 ...

  4. css 文本省略号显示

    文本省略号是非常常见的需求,而省略号展示又通常分为俩种情况折行和不折行.不折行: div { white-space:nowrap;/* 规定文本是否折行 */ overflow: hidden;/* ...

  5. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

  6. css 文本两行显示，超出省略号表示

     重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...

  7. css 文本溢出显示省略号

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

  8. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  9. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

随机推荐

  1. node 添加个人经历的接口

    1.定义experience const profileFields = {}; profileFields.experience=[]; 2.查找用户id const profile = await ...

  2. string.format()详解

    java中: 从 Java 5.0 开始,String 类新增了一个强大的字符串格式化方法 format().这个方法到现在用的人还是不多,实在是一种浪费.本文带你快速过一遍这个方法的功能,将来你要用 ...

  3. spring data jpa sql

    CREATE TABLE cst_customer ( cust_id bigint(32) NOT NULL AUTO_INCREMENT COMMENT '客户编号(主键)', cust_name ...

  4. 理解webpack中的process.env.NODE_ENV

    参考资料 一. process 要理解 process.env.NODE_ENV 就必须要了解 process,process 是 node 的全局变量,并且 process 有 env 这个属性,但 ...

  5. IP地址的定义和划分

    IP地址分类:                IP地址根据首首字节开始位可以分为5大类:             分类        首字节开始位         首字节数字范围           ...

  6. 查看电脑是否安装jdk以及安装了的路径

    1.输入cmd进入dos界面2.输入java -version,回车 C:\Users\Lenovo>java -versionjava version "1.7.0_71" ...

  7. linux之-mysql数据库2

    1.新建数据库 语句格式为 CREATE DATABASE <数据库名字>;,(注意不要漏掉分号 ;),前面的 CREATE DATABASE 也可以使用小写,具体命令为: 2.连接数据库 ...

  8. jQuery 删除行（带跨行的表格）

    jQuery 删除行(带跨行的表格) 实现效果,点击删除按钮后,在保证原来表格结构的基础上,移除当前行. 代码原理: 1.点击行后判断当前行的第一个<td>,是否包含rowspan属性,如 ...

  9. maven项目报错：Class path contains multiple SLF4J bindings

    maven项目编译不报错,运行时报错如下: SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [b ...

  10. 启动项目时，Mysql的连接问题

    1.com.mysql.jdbc.exceptions.jdbc4.MySQLNonTransientConnectionException: Could not create connection ...