1、首先，如果div中的文本特别少，不超过div宽度，那么这种就非常简单了，直接line-height等于height就可以了

　　　　<style type="text/css">

            #one{

                width: 200px;

                height: 200px;

                line-height: 200px;

                background: #FF9999;

                text-align: center;

            }

        </style>

        <div id="one">

                我是内容

        </div>

2、但是，在文本好多情况下，那么就会出现这种情况

GG了，如果div不是固定高度，使用padding是可以完美实现

    <style type="text/css">

            #one{

                width: 200px;

                padding: 100px 0;

                background: #FF9999;

                text-align: center;

            }

        </style>

    </head>

    <body>

            <div id="one">

                我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

            </div>

    </body>

3、2的前提是div不是定高的，但是在很多情况下，我们需要的div是需要定高的，

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display

属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和

display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：

<style type="text/css">
.wrap{
display: table;
}
#one{
width: 200px;
height: 200px;
display: table-cell;
background: #FF9999;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<div id="one">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
</div>
</body>

如何让div内的多行文本上下左右居中的更多相关文章

  1. css选择器（选择<div>内所有<p>元素）

    情况1:<div><p></div> 情况2:<div><a><p></p></a></div&g ...

  2. div内嵌p,div等块元素出现的问题

    div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...

  3. All about Div内显示滚动桥

    Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥 横向滚动桥比较简单,无需设置宽度,直接ov ...

  4. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  5. CSS——div垂直居中及div内文字垂直居中

    最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...

  6. css实现div内一段文本的两端对齐

    在一个固定宽度的div内,使得P标签内的文本两端对齐: text-align: justify;text-justify:inter-ideograph; <!DOCTYPE html> ...

  7. div 内 图片 垂直居中

    vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...

  8. 禁止选择DIV内的文本(css,js写法)

    css:<span style="font-family:SimSun;font-size:18px;">/* 禁止选择div内的文字 */ #hall_body { ...

  9. div内元素的居中

    1.如果是一行文字(不超过一行) parent{ text-align:center; line-height:div高度; } 2.如果是div内其他类型元素 parent{ height:xxxp ...

随机推荐

  1. java.lang.UnsatisfiedLinkError解决方法汇集（转载）

    我的解决方法: 将sigar.jar拷贝到/WEB-INF/lib/下,但这个方法不知道是不是终极解决办法,暂时没问题,其他方法可参考下面. 运行JSP报表程序页面出现java.lang.Unsati ...

  2. Linux安装Tomcat-Nginx-FastDFS-Redis-Solr-集群——【第六集之补充：文本编辑器vi/vim】

    一:vi/vim的基本使用流程,掌握这三个步骤就算是入门vi或者vim.接下来的学习都是对vim命令和使用技巧的掌握,这要求各位自己去记忆.因为很少使用到某些命令,自然我们经常忘记这些命令,所以一旦忘 ...

  3. python操作kafka（confluent_kafka 生产）

    #!/usr/bin/python # -*- coding:utf-8 -*- from confluent_kafka import Producer import json import tim ...

  4. Git 通过ssh 配置基于Host的差异配置

    Host gitlab.xxx.com HostName gitlab.xxx.com User user IdentityFile xxx\.ssh\id_rsa Host github.com H ...

  5. hdu1814 Peaceful Commission

    hdu1814 Peaceful Commission 题意:2-sat裸题,打印字典序最小的 我写了三个 染色做法,正解 scc做法,不管字典序 scc做法,错误的字典序贪心 #include &l ...

  6. SDL中按键对应的值

    想用SDL的按键检测,网上找了半天都没找到SDL中按键的值的定义,索性自己去看头文件,在SDL_keysym.h中. 其实很多键的值和它们的ASCII码是相同的. 其他更多的用法,可以参考这篇博客:h ...

  7. 读《31天学会CRM项目开发》记录4 - WEB服务配置

    好几天没有更新记录了,因为最近都在看本书的基础内容,然后跟着练习.等看到数据库部分,就晕菜了,只能草草浏览一遍,想在后面的实战中再加强. 下面是对IIS 和ASP.NET的配置! 一.什么是IIS? ...

  8. Java EE 导图

  9. Java精确测量代码运行时间

    Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...

  10. Data Center(5): 实例

    我们来分析从外网访问内网的服务的具体过程: 首先我们看DNS和Load Balancer是怎么工作的. 客户端要访问我们的系统,发送了一个https请求,https://nova.mycompany. ...