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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

#main {

    display: flex;

    display:-webkit-flex;

    flex-direction:column;/*纵向排列*/

}

#main div {

    width: 40px;

    height: 40px;

    display: flex;

    display:-webkit-flex;

    justify-content: center;/*水平居中*/

    align-items: center;/*垂直居中*/

    -webkit-align-items:center;

}

/*或者

#main div {

    width: 40px;

    height: 40px;

    display: flex;

    justify-content: space-around;

    flex-direction: column;

    align-items: center

}

*/

</style>

</head>

<body>

<div id="main">

    <div style="background-color:coral;">A</div>

    <div style="background-color:lightblue;">B</div>

    <div style="background-color:khaki;">C</div>

    <div style="background-color:pink;">D</div>

    <div style="background-color:lightgrey;">E</div>

    <div style="background-color:lightgreen;">F</div>

</div>

</body>

</html>

效果：

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

display:table-cell;

vertical-align:middle;

text-align:center;

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>兼容ie8及以上浏览器</title>

        <style type="text/css">

            .box{

                width:300px;

                height:300px;

                border:1px solid red;

                display:table-cell;

                vertical-align:middle;

                text-align:center;

             }

            .align-center-vertical{

            }

        </style>

    </head>

    <body>

        <div class="box">

            <div class="align-center-vertical">

                3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问3问无为谓我我我我问问</div>

        </div>

    </body>

</html>

效果：

3.利用vertical-align属性特性

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>兼容ie8及以上浏览器</title>

        <style type="text/css">

            .box {

                 border: 1px dashed #cccccc;

                 height: 300px;

                 width:500px;

                 font-size:;

             }

             .box p, .box i {

                 display: inline-block;

                 vertical-align: middle;

                 overflow: hidden;

                 *display:inline;

                 *zoom:1;

             }

             .box i {

                 height: 100%;

                 width:;

             }

             .box p {

                 font-size: 14px;

                 width: 100%;

             }

        </style>

    </head>

    <body>

        <div class="box">

              <p class="text">多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居中多行文本的垂直居</p>

            <i></i>

         </div>

    </body>

</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. Ansible安装及简单使用备注

    1.安装epel源: rpm -ivh https://dl.fedoraproject.org/pub/epel/epel-release-latest-6.noarch.rpm 2.安装: yum ...

  2. [AI开发]视频多目标跟踪高级版(离自动驾驶又‘近’了一点点)

    **本文恐怕不是完全的标题党** 视频多目标跟踪需要解决的关键点是前后两帧之间的Target Association,这是最难的环节(没有之一).第T帧检测到M个目标,第T+S(S>=1)帧检测 ...

  3. Java相关资料分享（视频+电子书籍）

    正所谓“授人以鱼不如授人以渔”,你们想要的Java学习资料来啦!不管你是学生,还是已经步入职场的同行,希望你们都要珍惜眼前的学习机会,奋斗没有终点,知识永不过时. 关注底下的公众号,获取百度网盘提取码 ...

  4. .Net MVC+NPOI实现下载自定义的Word文档

    我们浏览很多网站时都会看到下载文件的功能(图片.word文档等),好巧不巧的是贫道近日也遇到了这个问题,于是写一篇博客记录一下. 技术点:MVC.NPOI.Form表单. 具体如何实现,待贫道喝一口水 ...

  5. Hadoop系列002-从Hadoop框架讨论大数据生态

    本人微信公众号,欢迎扫码关注! 从Hadoop框架讨论大数据生态 1.Hadoop是什么 1)Hadoop是一个由Apache基金会所开发的分布式系统基础架构 2)主要解决,海量数据的存储和海量数据的 ...

  6. 测试 ASP.NET Core API Controller

    本文需要您了解ASP.NET Core MVC/Web API, xUnit以及Moq相关知识. 这里有xUnit和Moq的介绍: https://www.cnblogs.com/cgzl/p/917 ...

  7. ASP.NET Core Middleware 抽丝剥茧

    一. 宏观概念 ASP.NET Core Middleware是在应用程序处理管道pipeline中用于处理请求和操作响应的组件. 每个组件是pipeline 中的一环. 自行决定是否将请求传递给下一 ...

  8. Python爬虫入门教程 50-100 Python3爬虫爬取VIP视频-Python爬虫6操作

    爬虫背景 原计划继续写一下关于手机APP的爬虫,结果发现夜神模拟器总是卡死,比较懒,不想找原因了,哈哈,所以接着写后面的博客了,从50篇开始要写几篇python爬虫的骚操作,也就是用Python3通过 ...

  9. Android序列化

    1.序列化的目的 (1)永久的保存对象数据(将对象数据保存在文件当中,或者是磁盘中 (2)通过序列化对象在网络中传递对象 (3)通过序列化对象在进程间传递 (4)在Intent之间,基本的数据类型直接 ...

  10. Entity Framework 查漏补缺 （三）

    Code First的数据库映射 有两种方式来实现数据库映射: 数据属性:Data Annotation 映射配置: Fluent API 有继承关系的实体如何映射? Code First在生成数据库 ...