让div垂直居中的5种方法
方法一:
这个方法把 div 的显示方式设置为表格,然后我们可以使用表格的 vertical-align property 属性。
HTML & CSS:
1 <div class="wrapper"> 2 <div class="cell"> 3 <div class="content"> 4 <h1>把div显示方式设置为表格</h1> 5 </div> 6 </div> 7 </div>
1 .wrapper {display:table;background: #FC172E;width: 30%;height: 600px;} 2 .cell { 3 display:table-cell; 4 vertical-align:middle; 5 }
运行效果:
优点:
content 可以动态改变高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时, content 不会被截断
缺点:
Internet Explorer(甚至 IE8 beta)中无效
方法二:
这个方法使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
因为有固定高度,或许你想给 content 指定 overflow:auto
,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。
HTML & CSS:
1 <div class="content"> 2 对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。 3 </div>
1 .content { 2 background: #272822; 3 position:absolute; 4 top:50%; height:440px;width: 500px; 5 margin-top:-220px; /* 为高度的一半 */ 6 }
运行效果:
优点:
适用于所有浏览器
不需要嵌套标签
缺点:
没有足够空间时,content 会消失(类似div 在 body 内,当用户缩小浏览器窗口,滚动条不出现的情况)
方法三:
这个方法使用了一个 position:absolute
,有固定宽度和高度的 div
。这个 div
被设置为 top:0; bottom:0;
。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto
; 会使它居中。使用 margin:auto;
使块级元素垂直居中是很简单的。
HTML:
1 <div class="content"> 2 这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。 3 </div>
CSS:
1 .content { 2 position:absolute; 3 top:0; 4 bottom:0; 5 left:0; 6 right:0; 7 margin:auto; 8 height:440px; 9 width:70%; 10 background: #346FCE; 11 }
运行效果:
优点:
简单
缺点:
IE(IE8 beta)中无效
无足够空间时,content 被截断,但是不会有滚动条出现
方法四:
这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
HTML:
1 <div id="content"> 2 这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。 3 </div>
CSS:
1 #content { 2 margin: 50px auto; 3 height:300px; 4 line-height:300px; 5 background: #EAA527; 6 }
运行结果:
优点:
适用于所有浏览器
无足够空间时不会被截断
缺点:
只对文本有效(块级元素无效)
多行时,断词比较糟糕
这个方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
方法五:
这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;
。
content 清除浮动,并显示在中间。
HTML:
1 <div class="content"> 2 在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight; content 清除浮动,并显示在中间。 3 </div>
CSS:
1 .floater { 2 float:left; 3 height:50%; 4 position:relative; 5 margin-top:-250px; 6 } 7 .content { 8 clear:both; 9 height:500px; 10 background: #67930F; 11 position:relative; 12 }
运行效果:
优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小) content 不会被截断,滚动条出现
缺点:
唯一能想到的就是需要额外的空元素
我个人最喜欢 方法三:
使用了一个 position:absolute
,有固定宽度和高度的 div
。这个 div
被设置为 top:0; bottom:0;
。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto
; 会使它居中。使用 margin:auto;
使块级元素垂直居中是很简单的。
比较简单,而且让元素垂直居中的同时,元素也能够横向居中。
对于非块级元素而言,我们可以在外部添加 块级元素作为盒子,也可以通过 display 属性,将行内元素变为块级元素,再使用此方法。
( 来源于http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/)
转载于:https://www.cnblogs.com/redjoy/p/4699208.html
让div垂直居中的5种方法相关推荐
- div垂直居中的两种方法
div垂直居中的两种方法 表格方法 /* 第一种方法,DIV垂直居中 表格方法 */display: table-cell;/*设置成 表格单元*/vertical-align:middle;/*垂直 ...
- CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- CSS教程:div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
- html flex上下居中,css3 flex实现div内容水平垂直居中的几种方法
一.flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相 ...
- div水平垂直居中的七种方法
学习笔记(一) div水平垂直居中的七种方法 文章目录 学习笔记(一) 前言 一.绝对定位法 1.方法一 2.方法二 3.方法三 4.方法四 二.flex布局法 1.方法五 三.将小div转成行内块 ...
- 多行文本垂直居中的三种方法
本篇是我整理的多行文本垂直居中的三种方法 效果图如下图 方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格,子元素设置vertical-alig ...
- html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
- div垂直居中有几种
div垂直居中有几种 1.已知宽高 position: absolute; left: 50%; top: 50%; width:200px; height:100px; margin-left:-1 ...
- CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...
最新文章
- 如何用java完成Excel快速的导入导出
- 性能测试三十九:Jprofiler分析CPU过高和响应时间长的问题
- 跨主机使用 Rex-Ray volume - 每天5分钟玩转 Docker 容器技术(77)
- USB转485/232
- 【MATLAB-app】appdesigner 灰色区域 代码 如何修改?
- 使用java生成mapbox-gl可读的vector tile
- Oracle监听服务启动失败案例
- python条形图y轴_python 中条形图绘制
- Unity 屏幕模糊效果
- 以太网芯片MAC和PHY
- 西门子1200PLC的MODBUS_RTU轮询程序
- 2023最新支付宝微信运动步数网页源码+附带原始接口
- 解析木马攻击与防御发展简史
- php爬虫爬取校园新闻,python爬虫获取校园网新闻
- 报名信息填写完成! 您的报名号请牢记!
- ceonts6.8 nginx做前端代理apache做后端服务架构配置
- javaScript:语法和使用
- 给武则天找凤凰的java游戏,女皇武则天:我不愿被 extends
- 服务器响应未知 请再试一次,PS4 错误代码解决方法
- python计算互信息_Maximal Information Coefficient (MIC)最大互信息系数详解与实现