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. docker“少折腾”

    1.docker镜像加速 新版的 Docker 使用 /etc/docker/daemon.json(Linux) 或者 %programdata%\docker\config\daemon.json ...

  2. 创建线程的一般方式和匿名内部类方式对比——实现runnable接口，重新run方法

    启动:使用静态代理设计模式 优点:可同时实现继承,避免单继承局限性 一般方式: Programer.java /** * 真实角色 * * @author :liuqi * @date :2018-0 ...

  3. vue插件官方文档，做个记录

    vue的插件,组件都可以按照这种方式添加 官方文档 https://cn.vuejs.org/v2/guide/plugins.html 做个记录用

  4. 极速创建 IOS APP ！涛舅舅苹果 IOS APP自助生成系统！不用证书、不用越狱、永久可用

    不用签名将网页封装成苹果APP,无需苹果企业签名,IPA签名,ios签名,免越狱安装 (本方法只支持网站封装app,原生的用不了,详细请咨询客服) 近期很多朋友问我把网站变成app的方法,原因很多种, ...

  5. MQTT之Mosquitto

    https://mosquitto.org/ Eclipse Mosquitto是一个开源(EPL / EDL许可)消息代理,它实现了MQTT协议版本3.1和3.1.1.Mosquitto重量轻,适用 ...

  6. Spring AOP Capabilities ang goals

    Spring AOP 是用纯JAVA 实现的. 不需借助JAVA代码在编译处理阶段来实现. Spring 是在运行期实现的.AOP的实现可以在编译,加载,运行三个阶段来实现:Spring AOP 也不 ...

  7. myeclipse中配置自己安装的Tomcat

    myeclipse中配置自己安装的Tomcat 在myeclipse中配置好jdk,Tomcat之后,如果是web项目需要部署运行,但在部署时发现配置好的Tomcat没有显示,只显示了myeclips ...

  8. ECS云服务器配置数据库远程链接

    环境: windows server 2012 R2 Datacenter(数据中心版本) sql server 2008 R2 Express (环境的安装步骤此处不做教程) 开启远端链接重要步骤如 ...

  9. 用JS来判断版本号比如v21.2.2.2和v21.2.2.2.15

    当判断两个版本号的时候,不能单纯的去点然后相互比较,版本比较可能比较特殊,但是分析起来又挺简单的,既然不能直接去点比较,那就拆分成数组,一组一组对应的去比,为了能正常的进行比较 如果上一个版本长度小于 ...

  10. CSS3 神器总结

    1. 选择类 1.1 /* 鼠标选中区域,改变背景/字体颜色 */ /*遍历写法*/ div::selection { background-color: red; color: #fff; /* f ...