一、行高(line-height)法

如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距(padding)法

另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如:

p { padding:20px 0; }

这段代码的效果和line-height法差不多。

三、模拟表格法

将容器设置为display:table,然后将子元素也就是要垂直居中显示的元素设置为display:table-cell,然后加上vertical-align:middle来实现。

html结构如下:

<div id="wrapper">
<div id="cell">
<p>测试垂直居中效果测试垂直居中效果</p>
<p>测试垂直居中效果测试垂直居中效果</p>
</div>
</div>

css代码:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}

实现如图所示:

遗憾的是IE7及以下不支持。

四、CSS3的transform来实现

css代码如下:

.center-vertical{
position: relative;
top:50%;
transform:translateY(-50%);
}.center-horizontal{
position: relative;
left:50%;
transform:translateX(-50%);
}

五:css3的box方法实现水平垂直居中

html代码:

<div class="center">
<div class="text">
<p>我是多行文字</p>
<p>我是多行文字</p>
<p>我是多行文字</p>
</div>
</div>

css代码:

.center {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
background:#000;
color:#fff;
margin: 20px auto; display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center; display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center; display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center; display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center; display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}

结果如图:

六:flex布局(2018/04/17补充

html代码:

<div class="flex">
<div>
<p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
<p>我是多行文字我是多行文字我是多行文字我是多行文字</p>
</div>
</div>

CSS代码:

.flex{
/*flex 布局*/
display: flex;
/*实现垂直居中*/
align-items: center;
/*实现水平居中*/
justify-content: center; text-align: justify;
width:200px;
height:200px;
background: #000;
margin:0 auto;
color:#fff;
}

实现效果:

div中的内容垂直居中的五种方法的更多相关文章

  1. CSS总结div中的内容垂直居中的五种方法

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...

  2. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  3. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  4. 顽石系列:CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  5. 在shell中变量的赋值有五种方法!

    转至:https://blog.csdn.net/weibo1230123/article/details/82085226 在shell中变量的赋值有五种 :使用 read 命令,直接赋值,使用命令 ...

  6. 让块元素在div中水平居中,并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  7. JAVA中创建线程池的五种方法及比较

    之前写过JAVA中创建线程的三种方法及比较.这次来说说线程池. JAVA中创建线程池主要有两类方法,一类是通过Executors工厂类提供的方法,该类提供了4种不同的线程池可供使用.另一类是通过Thr ...

  8. css如何设置div中的内容垂直居中?

    <style>.out { position: relative;//相对div的定位 top: 30%;//相对div的border-top的距离,根据元素的高度,50%则为垂直居中:} ...

  9. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

随机推荐

  1. Window下生成OpenSSL自签证书

    :OPenSSL下载地址:https://www.openssl.org/source/ 编译好的OpenSSL下载地址: http://slproweb.com/products/Win32Open ...

  2. linux 下 整合 nginx 和 php

    一.整合nginx 和 PHP: # vi /usr/local/php/etc/php-fpm.conf 如果该文件不存在,有可能是默认的php-fpm.conf.default 可以使用命令拷贝一 ...

  3. j2ee log4j集中式日志解决方案logpool-v0.4发布说明

    logpool v0.4发布说明: 1.持久化采用mongodb非结构化存储实现,以满足后续调整的灵活需要:

  4. 怎样高效地去判断Array中是否包含某个值?

    问题 怎样去判断Array(无序)中是否包含某个值呢? 这是一个在Java中经常被问到的问题.它也是Stack Overflow上投票前几的一个问题.下面将展示投票前几的几个回答,这些回答使用不同的方 ...

  5. request.getRequestDispatcher()的两个方法forward()/include()!!!

    RequestDispatcher rd = request.getRequestDispatcher("/MyServlet");请求转发: rd.forward( reques ...

  6. JavaScript中instanceof运算符的用法以及和typeof的区别

    instanceof : 判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例:返回boolean类型栗子①: var aColors = ["red", "g ...

  7. cl_gui_cfw=>dispatch

    将已经触发的EVENT发送给他们各自的EVENT HANDLER,以便让这些事件得到响应. 根据返回值可以判断是否发送成功. CALL METHOD cl_gui_cfw=>dispatch   ...

  8. Office2016体验

    Microsoft又迎来了更新的季节.对于我来说,win10就算了,不太稳定,特别是遇到一些专业的程序,因为很多行业软件开发.测试环境都是winxp或win7等:VS2015也安上了,但还没用,一直用 ...

  9. How does Web Analytics works under sharePoint 2010

    [http://gokanx.wordpress.com/2013/06/15/how-does-web-analytics-works-under-sharepoint-2010/] You nee ...

  10. 微信支付redirect_uri参数错误

    在做微信支付的时候,点击提交,出现“redirect_uri参数错误”.经过查找,需要在后台正确设置授权域名.大致步骤如下:1.首先登录微信公众号管理后台2.点击开发者中心3.找到 网页账号—> ...