<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. 从Linux传输apk包到Windows系统，一周的心路历程，累

    1.在Windows服务器上打开一个cmd窗口,执行脚本,只适用于Windows系统 --NO String cmd = "cmd.exe /c adb -s f223413 install ...

  2. RGBA的值0-255范围如何转换成0-1范围

    这样一个rgba(1,0,0,1) 如果我们要把它转换成 0-255范围 就是rgb分别乘以255 就是 rgba(255,0,0,1) 0-255转0-1范围 如 rgba(34,56,56,1)转 ...

  3. 字符串操作——C语言实现

    代码如下: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <asse ...

  4. python3 实现简单ftp服务功能（客户端）

    转载请注明出处! 可执行的命令: lspwdcd put rm get mkdir 上传下载,显示进度百分比以及平均上传下载速度 客户端 main代码: #Author by Andy #_*_ co ...

  5. java基础学习笔记六（继承）

    继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父 ...

  6. rabbitMQ初始化配置

    用户管理添加用户# rabbitmqctl add_user username password删除用户# rabbitmqctl delete_user username修改密码# rabbitmq ...

  7. sql server教程

    简单认识 SQL Server sql server教程 SQL Server 是 Microsoft 开发的一个关系数据库管理系统(RDBMS),现在是世界上最为常用的数据库: SQL Server ...

  8. 一条SQL在 MaxCompute 分布式系统中的旅程

    摘要:2019杭州云栖大会大数据技术专场,由阿里云资深技术专家侯震宇.阿里云高级技术专家陈颖达以及阿里云资深技术专家戴谢宁共同以“SQL在 MaxCompute 分布式系统中的旅程 ”为题进行了演讲. ...

  9. Python基础教程（004）--Python的设计哲学

    前言 Python已经成为了一门流行的编程语言. 知识点 1,优雅 2,明确 3,简单 Python开发者的哲学是:用一种方法,最好是只有一种方法来做一件事. 如果面临多种选择,Python开发者都会 ...

  10. CSS入门之盒模型（六分之四）

    盒模型要点知识 务必注意看,这可是前端面试 必定会遇到 的问题. box-sizing 盒模型的主要CSS属性,除继承外有两个值: content-box 这里不再细说历史原因,只说其作用. cont ...