<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. cnblogs添加打赏

    上图上真相 1.进入后台设置---文件 2.上传你的支付宝和微信收款码(注意图片格式为bmp格式) 2.还是上图的位置,选择设置选项,找到博客侧边栏公告(支持HTML代码)(支持JS代码) 3.将如下 ...

  2. 使用nano编辑器进行查找和替换

    笔者自己常用的是vim.这里nano的使用场景就是刚安装好Ubuntu系统,想要替换更新源,这时候还没装上vim.所以,学一下如何用nano查找和替换,可以解决这个小问题. 首先sudo nano / ...

  3. js动态添加的元素绑定事件

    最近做的项目要实现一个动态添加动态删除的功能,思考了一下,该怎么给动态添加的元素绑定事件.最后觉得有两种方式比较可靠,第一种是在动态添加的html代码里添加oclick事件,然后给传个唯一的参数来判断 ...

  4. Linux文本处理三剑客之——grep

    一Linux文本处理三剑客之——grep Linux文本处理三剑客都支持正则表达式 grep :文本过滤( 模式:pattern) 工具,包括grep, egrep, fgrep (不支持正则表达式) ...

  5. L1、L2损失函数、Huber损失函数

    L1范数损失函数,也被称为最小绝对值偏差(LAD),最小绝对值误差(LAE) L2范数损失函数,也被称为最小平方误差(LSE) L2损失函数 L1损失函数 不是非常的鲁棒(robust) 鲁棒 稳定解 ...

  6. bash: service: command not found 错误的解决方法

    service命令是要用ROOT用户来执行的,而出错的用户是用su root切换到ROOT用户下,这个命令没有也不会把环境带过去! 用如下命令就不会出错了:su - root 注意:su 后面是一个空 ...

  7. js 常用功能实现（函数）

    1.10 个短小实用的代码片段 :https://www.jianshu.com/p/3ef822ec5a63 2.js常用函数  : https://www.cnblogs.com/wangyuyu ...

  8. [CSP-S模拟测试41]题解

    中间咕的几次考试就先咕着吧…… A.夜莺与玫瑰 枚举斜率.只考虑斜率为正且不平行于坐标轴的直线,最后把$ans\times 2$再$+1$即可. 首先肯定需要用$gcd(i,j)==1$确保斜率的唯一 ...

  9. appium 链接真机运行时报错

    今天用appium链接真机时,碰到的第一个问题:Attempt to re-install io.appium.settings without first uninstalling.(这是日志中显示 ...

  10. python学习笔记：函数

    一.函数是什么 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pasca ...