1.方法一：使用css3弹性盒子（兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持）

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <style>
  7. #main {
  8.     display: flex;
  9.     display:-webkit-flex;
  10.     flex-direction:column;/*纵向排列*/
  11. }
  12.  
  13. #main div {
  14.     width: 40px;
  15.     height: 40px;
  16.     display: flex;
  17.     display:-webkit-flex;
  18.     justify-content: center;/*水平居中*/
  19.     align-items: center;/*垂直居中*/
  20.     -webkit-align-items:center;
  21. }
  22. /*或者
  23. #main div {
  24.     width: 40px;
  25.     height: 40px;
  26.     display: flex;
  27.     justify-content: space-around;
  28.     flex-direction: column;
  29.     align-items: center
  30. }
  31. */
  32. </style>
  33. </head>
  34. <body>
  35.  
  36. <div id="main">
  37.     <div style="background-color:coral;">A</div>
  38.     <div style="background-color:lightblue;">B</div>
  39.     <div style="background-color:khaki;">C</div>
  40.     <div style="background-color:pink;">D</div>
  41.     <div style="background-color:lightgrey;">E</div>
  42.     <div style="background-color:lightgreen;">F</div>
  43. </div>
  44.  
  45. </body>
  46. </html>

效果：

2.使用display:table-cell（不确定高度的容器中垂直居中）

  1. display:table-cell;
  2. vertical-align:middle;
  3. text-align:center;

兼容性：IE8及以上浏览器，chrome,firefox

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>兼容ie8及以上浏览器</title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width:300px;
  9.                 height:300px;
  10.                 border:1px solid red;
  11.                 display:table-cell;
  12.                 vertical-align:middle;
  13.                 text-align:center;
  14.              }
  15.             .align-center-vertical{
  16.             }
  17.  
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <div class="box">
  22.             <div class="align-center-vertical">
  23.                 3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问</div>
  24.         </div>
  25.     </body>
  26. </html>

效果：

3.利用vertical-align属性特性

ps:W3C上对vertical-align的定义：vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>兼容ie8及以上浏览器</title>
  6.         <style type="text/css">
  7.             .box {
  8.                  border: 1px dashed #cccccc;
  9.                  height: 300px;
  10.                  width:500px;
  11.                  font-size:;
  12.              }
  13.              .box p, .box i {
  14.                  display: inline-block;
  15.                  vertical-align: middle;
  16.                  overflow: hidden;
  17.                  *display:inline;
  18.                  *zoom:1;
  19.              }
  20.              .box i {
  21.                  height: 100%;
  22.                  width:;
  23.              }
  24.              .box p {
  25.                  font-size: 14px;
  26.                  width: 100%;
  27.              }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div class="box">
  32.               <p class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p>
  33.             <i></i>
  34.          </div>
  35.     </body>
  36. </html>

效果：

作者：smile.轉角

QQ：493177502

【css】一行或者多行文字垂直水平居中的更多相关文章

  1. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  2. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  3. 经典CSS坑：如何完美实现垂直水平居中？

    经典CSS坑:如何完美实现垂直水平居中? 踩了各种坑之后总结出的方法,开门见山,直接上代码和效果图.希望对读者有所帮助,后续如果有更好的方法,我也会持续更新 第一种方法:transform(个人认为最 ...

  4. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  5. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  6. css如何设置首行文字缩进？

    在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...

  7. CSS样式—— 字体、元素的垂直水平居中

    1.CSS样式与HTML中标签属性的区别: 标签的属性是采用 属性名=“属性值” 表示的 CSS样式是采用名值对 属性名:属性值: 表示的 2.内联元素(行内元素)与块元素 (1)内联元素及其特点: ...

  8. css实现弹出窗体始终垂直水平居中

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

  9. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...

随机推荐

  1. 查找最近公共祖先(LCA)

    一.问题 求有根树的任意两个节点的最近公共祖先(一般来说都是指二叉树).最近公共祖先简称LCA(Lowest Common Ancestor).例如,如下图一棵普通的二叉树. 结点3和结点4的最近公共 ...

  2. chrome谷歌浏览器开发者工具-网络带宽控制

    有时候我们想在本地测试一下图片预加载loading的加载情况,如下图: 可无奈一般网络带宽都比较好,基本上看不到效果,图片一下子就加载出来了, 可能这个时候有些小伙伴想到的办法是用定时器延迟加载 其实 ...

  3. JavaSSM框架报HTTP Status 500 - Servlet.init() for servlet springMvc threw exception错误

    如下,刚搭建的项目报这样的错,刚学框架的我一脸懵逼...网上很多说是jdk或者springmvc的的jar的版本问题,但是我其他项目都可以啊,所以排除了这个问题. 经过几个小时的排查,发现了我的问题所 ...

  4. MongoDB学习笔记~地图坐标的支持与附近点的查找

    回到目录 Mongodb这个数据库很不错,它的方法也不错,为了实现坐标功能,它甚至为我们提供了geo里的一些算法,帮助我们通过某个点去位置和查找N个附近的点. 表面 在您存储地理数据和编写查询条件前, ...

  5. 谓词筛选表达式的扩展库PredicateLib

    PredicateLib PredicateLib是谓词筛选表达式Expression<Func<T, bool>>的一个扩展库,它可以帮你创建一个复杂且灵活的Expressi ...

  6. 开辟sys节点用户层直接操作物理地址（比/dev/mem方便）

    在调试驱动程序时, 经常要设置主控器寄存器参数或者运行时读取寄存器值debug问题, 每次修改驱动读取寄存器值都要编译一次驱动再insmod, 十分不方便, 哪怕驱动提供一个节点 如dev/mem给应 ...

  7. 并发系列（4）之 AbstractQueuedSynchronizer 源码分析

    本文将主要讲述 AbstractQueuedSynchronizer 的内部结构和实现逻辑,在看本文之前最好先了解一下 CLH 队列锁,AbstractQueuedSynchronizer 就是根据 ...

  8. Java服务器内存过高&CPU过高问题排查

    一.内存过高 1.内存过高一般有两种情况:内存溢出和内存泄漏 (1)内存溢出:程序分配的内存超出物理机的内存大小,导致无法继续分配内存,出现OOM报错 (2)内存泄漏:不再使用的对象一直占据着内存不释 ...

  9. 痞子衡嵌入式：飞思卡尔i.MX RT系列MCU开发那些事 - 索引

    大家好,我是痞子衡,是正经搞技术的痞子.本系列痞子衡给大家介绍的是飞思卡尔i.MX RT系列微控制器相关知识. 飞思卡尔半导体(现恩智浦半导体)于2017年开始推出的i.MX RT系列开启了高性能MC ...

  10. 简易调色盘控件 for .NET（EN）

    By Conmajia Originally posted in 2012 Introduction Simple & fast implementation of a rectangular ...