CSS垂直居中的11种实现方式
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其它非主流浏览器。
11种实现方式分别如下:
<div id="box"><div id="child">我是测试DIV</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;position: relative; } #child {width: 150px;height: 100px;background: orange;position: absolute;top: 50%;margin: -50px 0 0 0;line-height: 100px; }
运行结果如下:
<div id="child">我是一串很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本 </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;position: relative; } #child {background: #93BC49;position: absolute;top: 50%;transform: translate(0, -50%); }
运行结果如下:
<div id="box"><div id="child">我也是个测试DIV</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;position: relative; } #child { width: 50%;height: 30%;background: pink;position: absolute;top: 50%;margin: -15% 0 0 0; }
运行结果如下:
<div id="box"><div id="child">呆呆今天退役了(。﹏。)</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;position: relative; } #child {width: 200px;height: 100px;background: #A1CCFE;position: absolute;top: 0;bottom: 0;margin: auto;line-height: 100px; }
运行结果如下:
<div id="box"><div id="child">今天西安的霾严重的吓人,刚看了一眼PM2.5是422</div> </div>
css代码:
#box {width: 300px;background: #ddd;padding: 100px 0; } #child {width: 200px;height: 100px;background: #F7A750;line-height: 50px; }
运行结果如下:
<div id="box"><div id="base"></div><div id="child">今天写了第一篇博客,希望可以坚持写下去!</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd; } #base {height: 50%;background: #AF9BD3; } #child {height: 100px;background: rgba(131, 224, 245, 0.6);line-height: 50px;margin-top: -50px; }
运行结果如下:
<div id="box">雾霾天气,太久没有打球了</div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;display: flex;align-items: center; }
运行结果如下:
这种方式同样适用于块级元素:
html代码:
<div id="box"><div id="child">程序员怎么才能保护好眼睛?</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;display: flex;align-items: center; } #child {width: 300px;height: 100px;background: #8194AA;line-height: 100px; }
运行结果如下:
<div id="box"><div id="child">答案当然是多用绿色的背景哈哈</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;display: flex;flex-direction: column;justify-content: center; } #child {width: 300px;height: 100px;background: #08BC67;line-height: 100px; }
运行结果如下:
<div id="box">我是一段测试文本 </div>
css代码:
#box{width: 300px;height: 300px;background: #ddd;line-height: 300px; }
运行结果如下:
<div id="box"><img src="duncan.jpeg"> </div>
css代码:
#box{width: 300px;height: 300px;background: #ddd;line-height: 300px; } #box img {vertical-align: middle; }
运行结果如下:
<div id="box"><div id="child">我也是一段测试文本</div> </div>
css代码:
#box {width: 300px;height: 300px;background: #ddd;display: table; } #child {display: table-cell;vertical-align: middle; }
运行结果如下:
这里关于vertical-align啰嗦两句:vertical-align属性只对拥有valign特性的html元素起作用,例如表格元素中的<td><th>等等,而像<div><span>这样的元素是不行的。
valign属性规定单元格中内容的垂直排列方式,语法:<td valign="value">,value的可能取值有四种:
转载于:https://www.cnblogs.com/zhouhuan/p/vertical_center.html
CSS垂直居中的11种实现方式相关推荐
- CSS垂直居中的10种实现姿势
前言 前端开发中元素居中是最常见和最经常使用到的css技巧,不仅开发中经常会用到,面试官出题考核基础时有时候也会问道这类问题.本文主要介绍10种垂直居中的方法.希望对你我都有帮组. 1.line-he ...
- html 水平垂直居中,css水平垂直居中有几种实现方式?
项目中经常碰到需要实现水平垂直居中的样式.下面就总结几种常用的方法 css水平垂直居中有几种实现方式? 1.水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂 ...
- 分析|拥有11种验证方式的顶象无感验证,不仅省钱,还省时
验证码"作为人机交互界面经常出现的元素,其本质是为了防止用户利用机器人程序自动注册.登录.恶意投票.发送垃圾邮件.恶意尝试密码等登陆尝试,保证网络安全." 据统计,全球所有人每天需 ...
- 高度不定垂直居中_经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
- CSS 垂直居中的七种方法——史上最详细总结
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
- 经典:CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
- css 图文 上下 居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
- html之CSS设计(四种引入方式、各种选择器)
文章目录 一.CSS简介 二.四种引入方式 三.CSS选择器 四.练习代码 本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用 一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
- CSS垂直居中的8种方法
1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
最新文章
- 《响应式Web图形设计》一13.2 缩放图像带来的问题
- 扩展Ext2类 Extending Ext2 Class
- python嵌入html_Python odoo中嵌入html简单的分页功能
- .NET Framework 类库: Uri类
- 北京内推 | 美团用户平台NLP中心招聘图学习(GNN)方向实习生
- Flink数据清洗(Kafka事实表+Redis维度表)
- C# Android wifi控制灯,求助如何在基于安卓通过WiFi与Arduino通信,实现对LED灯的控制。...
- api签名_使用签名保护基于HTTP的API
- mysql8.0其他机器访问_量子公司重大突破,量子机器学习实用化进程加速
- Element-UI-的布局和容器---Element-UI工作笔记003
- Java堆溢出错误:java.lang.OutOfMemoryError: Java heap space
- NB-IoT 备胎转正的背后,究竟意味着什么?
- 南阳OJ 47 过河问题
- idea报Establishing SSL connection without server‘s identity verification is not recommended.
- 基于javaweb+jsp的户籍管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Bootstrap)
- 「津津乐道播客」#380 津津有味:厨房重地举目皆是刚需,将就不得
- 统计之均值中位数众数全距四分位数以及箱线图展示
- 生产环境CPU占用飙高问题解决
- 简要说明中国大学生篮球状况和未来发展前景(300字
- java实现移动云mas短信对接