<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. 手写Spring事务框架

    Spring事务基于AOP环绕通知和异常通知 编程事务 声明事务 Spring事务底层使用编程事务+AOP进行包装的   = 声明事务 AOP应用场景:  事务 权限 参数验证 什么是AOP技术 AO ...

  2. 手写实现indexOf

    突然奇想.自己手写一个indexOf package com.toov5.test; public class Test8 { public static int find(String str1, ...

  3. 【leetcode】519. Random Flip Matrix

    题目如下: You are given the number of rows n_rows and number of columns n_cols of a 2D binary matrix whe ...

  4. 【leetcode】915. Partition Array into Disjoint Intervals

    题目如下: 解题思路:题目要求的是在数组中找到一个下标最小的index,使得index左边(包括自己)子序列的最大值小于或者等于右边序列的最小值.那么我们可以先把数组从最左边开始到数组最右边所有子序列 ...

  5. feign学习

    feign集成了ribbon,只需要新建接口加注解即可 <!--feign相关--> <dependency> <groupId>org.springframewo ...

  6. delphi 使电脑睡眠代码

    //提升进程令牌函数 function AdjustProcessPrivilege(ProcessHandle:THandle;Token_Name:Pchar):boolean; var Toke ...

  7. flutter环境搭建及跑起来demo（多图慎入）

    话不多说,直接上 [1]环境搭建 从git上面clone下来 git clone -b beta https://github.com/flutter/flutter.git 由于国内网络的问题,我就 ...

  8. java并发编程笔记（三）——线程安全性

    java并发编程笔记(三)--线程安全性 线程安全性: ​ 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协同,这个类都能表现 ...

  9. 政府网站综合防护系统（网防G01）

    政府网站综合防护系统,简称“网防G01”,是首款专门针对政府网站及服务器等关键信息基础资源进行综合防护的产品,由公安部第一研究所和计算机病毒防治技术国家工程实验室(北京)研发. 网防G01的架构 由服 ...

  10. git submodule 删除及修改

    1.  删除子模块 # 逆初始化模块,其中{MOD_NAME}为模块目录,执行后可发现模块目录被清空 git submodule deinit {MOD_NAME} # 删除.gitmodules中记 ...