html圆如何找到垂直中心线,HTML+CSS入门 7种方式实现垂直居中
本篇教程介绍了HTML+CSS入门 7种方式实现垂直居中,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
1、使用绝对定位垂直居中
绝对对位原理:元素在过度受限情况下,将margin设置为auto,浏览器会重算margin的值,过度受限指的是同时设置top/bottom与height或者left/right与width。
.absolute_center{
/*display:none;*/
position:absolute;
width:200px;
height:200px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
background:#518fca;
resize:both;/*用于设置了所有除overflow为visible的元素*/
overflow:auto;
}
使用绝对定位要求元素必须设置明确高度。内容超过元素高度时需要设置overflow决定滚动条的出现
优点:支持响应式,只有这种方法在resize之后仍然垂直居中
缺点:没有显式设置overflow时,内容超过元素高度时会溢出,没有滚动条
2、负marginTop方式
已知元素高度后,使用绝对定位将top设置为50%,mergin-top设置为内容高度的一半(height + padding) / 2;内容超过元素高度时需要设置overflow决定滚动条的出现
原理:top:50%元素上边界位于包含框中点,设置负外边界使得元素垂直中心与包含框中心重合;
.negative_margin_top{
position:absolute;
top:50%;
left:0;
right:0;
margin:auto;
margin-top:-100px; /*-(height+padding)/2*/
width:200px;
height:200px;
}
优点:代码量少、浏览器兼容性高支持ie6 ie7
缺点:不支持响应式(不能使用百分比、min/max-width)
3、借助额外元素floater
元素高度已知,在center元素外插入一个额外元素floater,设置floater的height为50%;margin-bottom为center元素高度的一半(height + padding) / 2。内容超过元素高度时需要设置overflow决定滚动条的出现。
原理与2方法类似,floater的下边界是包含框的中心线,负下外边界保证center的中心线与包含框中心线重合。
.floater{
height:50%;
margin-bottom:-100px;
}
.floater_center{
height:200px;
width:200px;
margin:auto;
}
优点:浏览器兼容性好,支持旧版本ie
缺点:需要额外元素,不支持响应式
4、table-cell方式
将center元素的包含框display设置为table,center元素的display设置为table-cell,vertical-align设置为middle。
原理:利用表布局特点,vertical-align设置为middle后,单元格中内容中间与所在行中间对齐
.container2{
display:table;
height:100%;
}
.table_cell{/*将cell垂直居中,如果外层div不为table则tablecell必须有高度*/
display:table-cell;
vertical-align:middle;
}
优点:支持任意内容的可变高度、支持响应式
缺点:每一个需要垂直居中的元素都会需要加上额外标签(需要table、table-cell两个额外元素)
5、inline-block方式
将center元素display设置为inline-block,vertical-align设置为middle,为包含框设置after伪元素,将伪元素display设置为inline-block,vercial-align设置为middle,同时设置height为100%,撑开容器。
原理:为同一行的inline-block元素设置vertical-align:middle,该行内的inline-block元素会按照元素的垂直中心线对齐。
.container{
display:block;
}
/*inline-block的前世今生*/
.container:after{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.inline_block{
display:inline-block;
vertical-align:middle;
}
优点:支持响应式、支持可变高度
缺点:会加上额外标记
6、line-height方式
该方式只适用于情况比较简单的单行文本,将line-height设置与元素高度同高。
原理:如果line-height高度大于font-size,生于高度浏览器会平分到文字上下两端。
其实我们每个人的生活都是一个世界,即使最平凡的人也要为他生活的那个世界而奋斗。
.single_line{
height: 30px;
font-size: 14px;
line-height: 30px;
border: 1px solid #518dca;
}
优点:简单明了
缺点:只适用于单行文本,局限性大
7、弹性盒式布局
利用弹性盒式布局,将字元素的主轴、侧轴的排列方式都设置为居中对齐
原理:使用CSS弹性盒
.is-Flexbox {
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;
}
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
html圆如何找到垂直中心线,HTML+CSS入门 7种方式实现垂直居中相关推荐
- html圆如何找到垂直中心线,一种用于找中心线及圆心的装置的制作方法
本实用新型属于尺规测量技术领域,具体涉及一种用于找中心线及圆心的装置. 背景技术: 当前采用的划线方法,一般都是使用高度千分尺或钢直尺,加上分度头等.划线时先测量圆板或法兰的直径,再取其半径,将门星板 ...
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- CSS初学之引入css的三种方式(一)
1.引入css的三种方式 一.第一种 简介 第一种:行内样式 每一个元素都具备style属性,通过该属性可以设置元素的相关样式 缺点: 复用性不高,样式更新麻烦 不复合网页标准,h ...
- 导入CSS的三种方式
文章目录 1 行内方式 2 内部样式表 3 外链方式 3.1 链接式 3.2 导入式 1 行内方式 <p style="background:red;">第一种方式&l ...
- HTML中放置CSS的三种方式和CSS选择器
(一)在HTML中使用CSS样式的方式一般有三种: 1 内联引用 2 内部引用 3 外部引用. 第一种:内联引用(也叫行内引用) 就是把CSS样式直接作用在HTML标签中. <p style=& ...
- 分别写出引入CSS的3种方式, 特点, 优先级
第一:css的三种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
- Web CSS #id 标签选择器 style display 类选择器.class 使用CSS的三种方式 列表装饰 绝对定位
文章目录 CSS使用的三种方式 内联定义方式 实现代码 实现结果 样式块方式 实现代码 显示结果 链入外部样式表文件 实现代码 图是结果 #id 选择器 #id名 实现代码 实现结果 标签选择器 标签 ...
- html无序列表空心圆_列表样式的使用CSS入门基础(018)
今天我们分享关于列表样式的内容.列表项list-sytle-type:在HTML学习中,我们知道有有序列表和无序列表,都是使用type属性来定义的.1.有序列表 有序列表 有序列表 有序列表 属 ...
- 引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 <li ...
最新文章
- php判断前端传的多个字段与数据库匹配
- liunx 学习笔记-wzq
- 道里云SDN云网络技术:使云能够“众筹”
- astar插件下载 就行_暗黑破坏神2地图插件常用的设置,做自己的私人订制游戏!...
- element el-table加入固定列时 滚动条无法移动 失效的情况
- L3-020 至多删三个字符 (30 分)-PAT 团体程序设计天梯赛 GPLT
- 计算机毕业设计中用Java实现在线考试系统
- RN开发环境搭建-window
- PASCAL VOC 2007数据集,百度云下载
- 抽象代数学习笔记(抽象代数的历史、运算)
- 如何查找期刊是否被SCI或者SSCI收录
- 声鉴卡HTML5网页源码
- 快应用中实现自定义抽屉组件
- 杭电校赛(油菜花王国)
- 微信小程序授权订阅消息判断用户取消或允许
- 阿尔法编程python答案_C语言程序设计-阿尔法编程(编程答案)
- 安装win10自带Linux子系统并用win10商店安装win10自带的Ubuntu
- android安全问题(八)伪造短信(利用原生android4.0漏洞)
- 牛客网暑期ACM多校训练营(第二场)A .run
- DOS 61条圣经完整版
热门文章
- 将win10中的RECOVERY盘符隐藏
- k8s——pod控制器
- 2021最新 ICP备案教程-图文详细流程适合新手小白
- k8s中kubeconfig的配置以及使用详解
- QQ聊天/空间 链接调起微信跳转到公众号/加好友的方法
- python beautifulsoup4 table tr_使用python的BeautifulSoup解析“tbody/tr/td”
- 差之毫厘,谬之千里——函数的递归!
- windows7下安装Docker Toolbox
- 体素化(Voxelization) 3D模型体素化
- 支付宝 Android 版使用的开源组件