先上效果图

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .wrap1 {

            width: 200px;

            height: 200px;

            background: red;

            line-height: 200px;

        }

        .wrap2 {

            width: 200px;

            height: 200px;

            background: blue;

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div class="wrap1">

        wrap1中的文字.

    </div>

    <div class="wrap2">

        wrap2中的文字，wrap2中的文字，wrap2中的文字，wrap2中的文字，wrap2中的文字。

    </div>

</body>

</html>

css之div中纯文字单行和多行垂直居中的更多相关文章

  1. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

  2. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  3. CSS 之 div中文字超出时自动换行

          在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...

  4. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  5. css div中内容绝对居中（多行内容）

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

  6. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  7. JavaScript设置div中的文字滚动起来 实现滚动效果

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

  8. 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  9. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

随机推荐

  1. Kafka 消费者及消费者分区策略

    消费方式: consumer 采用 pull(拉)模式从 broker 中读取数据. push(推)模式很难适应消费速率不同的消费者,因为消息发送速率是由 broker 决定的. 它的目标是尽可能以最 ...

  2. Jar 和 war 区别

    jar包:对于学习java的人来说应该并不陌生.我们也经常使用也一些jar包.其实jar包就是java的类进行编译生成的class文件就行打包的压缩包而已.里面就是一些class文件.当我们自己使用m ...

  3. LeetCode283移动零问题java高效解法

    一.题目: 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. 示例: 输入: [0,1,0,3,12] 输出: [1,3,12,0,0] 说明: 1.必须 ...

  4. Apache Flink Dashboard未授权访问导致任意Jar包上传漏洞

    漏洞危害 攻击者无需Flink Dashboard认证,通过上传恶意jar包 csdn-[漏洞复现]Apache Flink任意Jar包上传导致远程代码执行 freebuf-Apache Flink ...

  5. phpmyadmin 4.8.1任意文件包含（CVE-2018-12613）

    简介 环境复现:https://gitee.com/xiaohua1998/hctf_2018_warmup 考察知识点:文件包含漏洞(phpmyadmin 4.8.1任意文件包含) 线上平台:榆林学 ...

  6. PHP的命令执行漏洞学习

    首先我们来了解基础 基础知识来源于:<web安全攻防>徐焱 命令执行漏洞 应用程序有时需要调用一些执行系统命令的函数,如在PHP中,使用system.exec.shell_exec.pas ...

  7. 这些Servlet知识你一定要知道，金九银十大厂面试官都爱问

    前言 Servlet是服务器端的Java应用程序,可以生产动态Web页面.透过JSP执行过程可以知道JSP最终被编译成一个.class文件,查看该文件对应的Java类,发现该Java类继承自org.a ...

  8. 深度分析：Java并发编程之线程池技术，看完面试这个再也不慌了！

    线程池的好处 Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序都可以使用线程池.在开发过程中,合理地使用线程池,相对于单线程串行处理(Serial Processing ...

  9. 基于chaosblade的故障注入平台小试

    当今社会互联网应用越来越广泛,用户量日益剧增.在人们对互联网服务的依赖性增大的同时,也对服务的可用性和体验感有了更高的要求.那么如何保障服务在运营过程中能一直给用户提供稳定的.不间断的.可靠可信的服务 ...

  10. 标准库之time，random，sys，os

    # import time # print(time.time()) # 时间戳 # print(time.mktime(time.localtime())) # 结构化时间转换为时间戳 # prin ...