CSS实现文字垂直居中
一、问题描述: 当高度固定或不固定时,单行或多行文本难以实现垂直居中;
二、解决方法:
1、使用line-height属性,将line-height设置与元素高度等高。
局限性:只适用于单行文本,局限性大。
代码:
.box {height: 100px;line-height: 100px;white-space: nowrap;
}
2.padding:设置相等的上下padding值。
局限性:有高度限制时不能垂直居中。
代码:
.box{padding-top: 30px;padding-bottom: 30px;
}
3.绝对定位居中:top:0; bottom:0; left:0; right:0; margin:auto;
元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值。(过度受限指的是同时设置top/bottom与height或者left/right与width。)
优点:支持响应式,只有这种方法在resize之后仍然垂直居中
缺点:使用绝对定位时元素必须有明确高度,没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条。IE浏览器不支持
代码:
.box{/*display:none;*/position:absolute;width:200px;height:200px;top:0;bottom:0;left:0;right:0;margin:auto;background:#000; resize:both;/*用于设置了所有除overflow为visible的元素*/overflow:auto;
}
4.固定高度定位居中:top: 50%;height: 100px;margin-top: -50px;
优点:代码量少、浏览器兼容性高,支持ie6,ie7
缺点:不支持响应式(不能使用百分比、min/max-width),高度固定。
代码:
.parent {position: relative;
}.child {position: absolute;top: 50%;height: 100px;margin-top: -50px; /*transform: translateY(-50%);*/
}
5.不固定高度定位居中:top:50%;left:50%;transform:translate(-50%, -50%)
缺点:不支持响应式(不能使用百分比、min/max-width)
代码:
.parent {position: relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);
}
6.table-cell方式居中:dispaly:table;display:table-cell;vertical-align:middle;
display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。
原理:利用表布局特点,vertical-align设置为middle后,单元格中内容中间与所在行中间对齐。
优点:支持任意内容的可变高度、支持响应式布局
缺点: 每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素);
IE浏览器不支持
代码:
.father{ height:200px; display:table;
}.son{border:1px solid #000; width:760px;vertical-align:middle;display:table-cell; /*cell垂直居中,如果外层div不为table则tablecell须有高度*/
}
7.弹性盒式布局居中:display: flex;align-items:center;
优点:真正的垂直居中布局
缺点:ie11才开始支持弹性布局
代码:
.box{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display: -webkit-flex;display:flex; -webkit-align-items:center;align-items:center;-webkit-justify-content: center;justify-content: center;
}
总结
1、只有单行文本时,可以将line-height设置与元素高度等高
2、外层div与内层div高度均固定时,可以使用设置相等的上下padding值;
3、当高度固定时,可以采用固定高度定位居中:top: 50%;height: 100px;margin-top: -50px;此方法对IE浏览器支持较好;
4、当高度不固定时,可以采用弹性盒式布局居中:display: flex;align-items:center;此方法操作简单,但ie11才开始支持弹性布局;或者采用table-cell方式居中:dispaly:table;display:table-cell;vertical-align:middle;此方法支持任意内容的可变高度,但操作繁琐,并且IE8以上的浏览器才支持;
CSS实现文字垂直居中相关推荐
- css图片跟文字居中,css 图片文字垂直居中
先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
- html DIV+CSS让文字垂直居中
CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,例如表格元素中的<td>.<th>.<caption&g ...
- 【css】文字垂直居中
前言 html在线运行https://www.runoob.com/runcode 方法1:容器高度不固定 将容器的padding-top和padding-bottom的值设置成相等的值. <! ...
- css设置div内文字垂直,DIV+CSS如何让文字垂直居中?
满意答案 dinahcat 2016.05.08 采纳率:48% 等级:5 已帮助:205人 div+css实现文字垂直居中的五种方法: 1.把文字放到table中,用vertical-alig ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
- CSS 文字垂直居中自适应 - 代码篇
CSS 文字垂直居中自适应 - 代码篇 引言 <div>内的文字能在图片缩放的同时,自动居中(自适应居中),详情看下列代码. 效果图: 解决办法 · 代码示下: /*CSS代码*/ .h3 ...
- php中文字怎么上下居中,CSS怎么设置垂直居中?
在我们开发前端页面的时候,为了让页面效果美观,会出现需要垂直居中效果的地方.本章就让我们来了解一下用css如何设置垂直居中,详细介绍一下设置文字与div盒子的垂直居中的几种方法.有一定的参考价值,有需 ...
- 利用vertical-align实现图片文字垂直居中对齐(HTML、CSS)
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
- 文字垂直居中(HTML、CSS)
文字垂直居中(HTML.CSS) 要使文字居中 即将文字行高等于盒子高度即可实现 <!DOCTYPE html> <html lang="en"><h ...
最新文章
- 销量过亿的《剑指0ffer》题目和答案电子书 (附下载)
- MySQL 关于性能的参数配置梳理
- sqlserver 跨服务器备份表
- 将excel多个工作表(表结构相同)合并后生成csv文件
- Canvas Clock
- 我国自主播放软件暴风影音挑落微软
- 五色电阻在线计算机,五色环电阻阻值在线计算一键生成计算器
- 微信小程序的Django后端极简部署
- win10专业版opnet安装及vs2010环境变量配置
- java中 求余运算 % ,正负号问题
- 定时任务task:annotation-driven配置
- 晒往期云栖大会的照片或感想_赢2017杭州云栖大会门票
- JavaScript内容回顾第十天
- JAVA家政服务管理系统毕业设计 开题报告
- 可供软件测试练习的在线网站、被测系统——整理中
- MATLAB随机森林回归模型
- 用计算机怎么做成绩表,利用Excel制作一个简单的学生成绩表.doc
- networkx 有向图强连通_有向图的强连通分支
- turtle科赫雪花的源码分析
- 用技巧] Http请求偶尔超时+总结各种超时死掉的可能和相应的解决办法
热门文章
- d2-admin动态菜单权限(登陆后)
- php两个手机号正则表达式_php 手机号码验证正则表达式
- 本地搭建start.spring.io
- 汽车油门踏板传感器信号测量-汽修示波器
- CCF A类与B类的国际期刊(高性能计算、人工智能)
- 中国蚁剑AntSword反制 RCE漏洞复现 windows环境上反弹shell 吊打攻击你的黑客
- c语言2个字符串可以相互赋值吗,c语言结构体2之变量赋值于字符串
- c语言实现gps坐标转化,C语言计算GPS卫星位置
- css·HTML知识梳理
- 用QRCode生成带有中间logo图的二维码