div中的内容垂直居中的五种方法
一、行高(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中的内容垂直居中的五种方法的更多相关文章
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- 顽石系列:CSS实现垂直居中的五种方法
顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...
- 在shell中变量的赋值有五种方法!
转至:https://blog.csdn.net/weibo1230123/article/details/82085226 在shell中变量的赋值有五种 :使用 read 命令,直接赋值,使用命令 ...
- 让块元素在div中水平居中,并且垂直居中的五种方法
在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...
- JAVA中创建线程池的五种方法及比较
之前写过JAVA中创建线程的三种方法及比较.这次来说说线程池. JAVA中创建线程池主要有两类方法,一类是通过Executors工厂类提供的方法,该类提供了4种不同的线程池可供使用.另一类是通过Thr ...
- css如何设置div中的内容垂直居中?
<style>.out { position: relative;//相对div的定位 top: 30%;//相对div的border-top的距离,根据元素的高度,50%则为垂直居中:} ...
- 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; ...
随机推荐
- Window下生成OpenSSL自签证书
:OPenSSL下载地址:https://www.openssl.org/source/ 编译好的OpenSSL下载地址: http://slproweb.com/products/Win32Open ...
- linux 下 整合 nginx 和 php
一.整合nginx 和 PHP: # vi /usr/local/php/etc/php-fpm.conf 如果该文件不存在,有可能是默认的php-fpm.conf.default 可以使用命令拷贝一 ...
- j2ee log4j集中式日志解决方案logpool-v0.4发布说明
logpool v0.4发布说明: 1.持久化采用mongodb非结构化存储实现,以满足后续调整的灵活需要:
- 怎样高效地去判断Array中是否包含某个值?
问题 怎样去判断Array(无序)中是否包含某个值呢? 这是一个在Java中经常被问到的问题.它也是Stack Overflow上投票前几的一个问题.下面将展示投票前几的几个回答,这些回答使用不同的方 ...
- request.getRequestDispatcher()的两个方法forward()/include()!!!
RequestDispatcher rd = request.getRequestDispatcher("/MyServlet");请求转发: rd.forward( reques ...
- JavaScript中instanceof运算符的用法以及和typeof的区别
instanceof : 判断一个对象是否为某一数据类型,或一个变量是否为一个对象的实例:返回boolean类型栗子①: var aColors = ["red", "g ...
- cl_gui_cfw=>dispatch
将已经触发的EVENT发送给他们各自的EVENT HANDLER,以便让这些事件得到响应. 根据返回值可以判断是否发送成功. CALL METHOD cl_gui_cfw=>dispatch ...
- Office2016体验
Microsoft又迎来了更新的季节.对于我来说,win10就算了,不太稳定,特别是遇到一些专业的程序,因为很多行业软件开发.测试环境都是winxp或win7等:VS2015也安上了,但还没用,一直用 ...
- 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 ...
- 微信支付redirect_uri参数错误
在做微信支付的时候,点击提交,出现“redirect_uri参数错误”.经过查找,需要在后台正确设置授权域名.大致步骤如下:1.首先登录微信公众号管理后台2.点击开发者中心3.找到 网页账号—> ...