<BODY>
  <div class="box">
   <h3>1.单行文字居中</h3>
   <!--设置行高来实现-->
   <div class="box1">
    这是高度为30像素的单行文字
   </div>
 
   <h3>2.多行文字不定高度居中</h3>
   <!--运用padding来实现-->
   <div class="box2">
    <div>多行文字不定高度居中</div>
    <div>多行文字不定高度居中</div>
    <div>多行文字不定高度居中</div>
   </div>
 
  </div>
 </BODY>

=============================

.box {
 width: 800px;
 margin: 50px auto;
 border: 1px solid red;
 font-size: 16px;
 text-align: center;
}
.box1 {
 border: 1px dashed red;
 line-height: 40px;
 margin: 30px;
}
.box2 {
 border: 1px dashed red;
 padding: 60px 0;
 margin: 30px;
}
 
 
参考： http://www.cnblogs.com/siqi/archive/2013/06/16/3138289.html

多行文字水平垂直居中在div的更多相关文章

  1. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  2. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

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

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

  4. 生成一个水平+垂直居中的div

    这是前端布局经常用到的布局方式,水平垂直居中:面试也经常会问到. 一. 绝对定位实现居中 注意:使用绝对定位布局的时候,外层元素必须也设置有position属性,具体设置为什么值看具体情况.只要不是s ...

  5. 微信小程序文字水平垂直居中对齐问题

    我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...

  6. DIV文字水平垂直居中的方法

    水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...

  7. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  8. CSS 实现：文字水平垂直居中

    ☊ [实现要求]: <div class="demo1"> 标题1111 </div> √ [实现]: 方案一:普通布局 .demo1 { text-ali ...

  9. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

随机推荐

  1. zeppelin0.7.3源码编译

    操作系统: Centos7.X Python版本: Python2.7 Maven版本:3.1.* Git:1.8.3.* JAVA:java1.7+ node npm bower grunt 每次执 ...

  2. selenium webdriver使用click一直失效问题的几种解决方法

    想要爬取动态网页,很莫名的click失效.被这个问题困扰了很久,基本上把网上提到的所有方法试遍了,最终终于有个方法成功了,在这里总结一下. 这是我想要点击的网页,初始时实在0.5km上,它的class ...

  3. 》》vue

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. [.Net跨平台]部署DTCMS到Jexus遇到的问题及解决思路---Linux环境搭建

    最近朋友托我帮忙研究如何把一个DTCMS部署到Linux下,经过1天的研究,部署基本成功,可能有些细节还未注意到,现在把心得分享一下.过程比预期的要简单 身为.Net程序员,这个问题的第一步可能就是如 ...

  5. 【java】java.lang.Math：public static long round(double a)和public static int round(float a)

    package math; public class TestMath_round { public static void main(String[] args) { System.out.prin ...

  6. HTTP服务及状态码

    第一章 HTTP 1.1 HTTP协议的概念 HTTP协议,全称HyperText Transfer Protocol,中文名为超文本传输协议,是互联网上常用的通信协议之一,它有很多的应用.但是流行的 ...

  7. ES6的数据类型

    首先ES6包含了ES5里面的数据类型,有undefined,null,boolean,String,Number,Object,而ES6又新增了一种数据类型是Symbol,这种的Symbol数据类型是 ...

  8. cocoapods安装说明，最快安装，以及使用

    安装卸载更新新推荐 文章最后 其他问题总结: 1 添加taobao提供的镜像地址:http://ruby.taobao.org/ 移除命令:gem sources --remove https://r ...

  9. Run a task only once in (akka) cluster

    在stackOverflow网站上看到这一提问,下文是部分摘抄问题简述: Java cluster, run task only once We have a java process, which ...

  10. .NET使用DAO.NET实体类模型操作数据库

    一.新建项目 打开vs2017,新建一个项目,命名为orm1 二.新建数据库 打开 SqlServer数据库,新建数据库 orm1,并新建表 student . 三.新建 ADO.NET 实体数据模型 ...