<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. Python3.5-20190518-廖老师-自我笔记-模块

    在Python中,一个.py文件就称之为一个模块(Module) 可以作为module的文件类型有".py".".pyo".".pyc".& ...

  2. java--字符串拼接比较

    /** * 字符串拼接 */ public class StringAddDemo { public static void main(String[] args){ testStringAdd(); ...

  3. SQL Server 管理套件（SSMS）

    SQL Server 管理套件(SSMS) 当您按照之前章节的步骤顺利安装完 SQL Server 2014 后,要做的第一件事就是需要打开 SQL Server 管理套件,并且要知道怎样去使用它. ...

  4. I2C自编设备驱动设计

    一.自编设备驱动模型 at24.c: static int __init at24_init(void) { io_limit = rounddown_pow_of_two(io_limit); re ...

  5. spring+websocket的整合实例--可使用

    spring+websocket的整合实例----借鉴如下链接--此贴用于笔记 https://blog.csdn.net/qq_35515521/article/details/78610847

  6. element-ui弹窗实现自定义宽度

    <el-dialog :title="title" :visible.sync="hiddenDialogCommon" :width="wid ...

  7. react教程 — 开发 总结

    本文章是在熟练使用 VUE 的基础上,对比VUE 功能进行的一个技术总结. 1.react项目快速搭建  https://blog.csdn.net/mapbar_front/article/deta ...

  8. Cent OS 7下安装 mongodb

    1.下载MongoDB 安装包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.8.tgz 2.解压并安装 .tgz 3. ...

  9. thinkphp5一键清除缓存

    入口文件定义缓存文件路径常量 define('DS', DIRECTORY_SEPARATOR); defined('APP_PATH') or define('APP_PATH', dirname( ...

  10. selenium自动化之验证，判断总结（持续更新）

    API命令 1,is_displayed() 例子:driver.find_element_by_css_selector("#id").is_displayed() 该元素是否可 ...