html整体垂直居中,实现HTML元素垂直居中的六种方法
一、 img的垂直水平居中
使用到的重要样式属性display,vertical-align
vertical-align:middle这个属性是对table元素垂直居中起作用,如果想使用在img元素上,就注意下面的display设置
Document
.main{
width: 400px;
height: 400px;
background-color: #aaa;
display: table;/*父元素设置表格属性*/
text-align: center;
}
.main span{
display: table-cell;/*img设置成表格元素属性*/
vertical-align: middle;/*两个display设置后这个属性就起作用*/
}
注意:display:table-cell,这是对类似文字元素起作用的,所以包含在span标签内
*对于文字居中也h1,span,p等类似文字标签都可以这样设置居中
二、 div的垂直水平居中
这种方法同样适用于img,只需将child换成img就行,不再需要span了
Document
.main{
width: 400px;
height: 400px;
background-color: #aaa;
position: relative;
}
.child{
width: 200px;
height: 200px;
background-color: rgb(39,40,34);
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
三、简便实现大部分元素的垂直居中
水平居中,如果是文本(内联元素)text-align:center,div(块级元素)margin:0 auto;,,所以我就不写水平居中了,别嫌我懒哦
我大概说一下,display:flex,将对象作为弹性伸缩盒显示
align-items:定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
.main{/*给父容器设置*/
display:flex;
align-items:center;/*所有子元素都垂直居中了*/
}
四、使用css3 属性transform
transform: translateY(50%);/*给子元素设置*/
transform: translateX(50%)也可以水平居中,但是上面已经说了,可以使用margin: 0 auot(块级),text-align(内联),水平垂直居中transform: translateX(50%) translateY(50%);
上面的所有垂直居中优点:是根本不需要知道父元素和子元素的尺寸,那下来下面的方法需要知道尺寸,但是不是不好,有的地方使用可能会很方便,看你项目中的情况
五、单行文本的垂直居中
设置文字的line-height==父元素的height
Test
.block{
height: 80px;
background-color: blue;
line-height: 80px;/*值与父元素高度相等*/
text-align: center;
}
六、需要知道子元素的尺寸
实现 水平与垂直居中
/*省略了尺寸的设置,侧重了重点,读者可以把部分内容加上*/
.main{/*父元素*/
position: relative;
}
.child{/*子元素*/
position: absolute;
top: 50%;
left: 50%;
margin-left: /*负的自身宽度一半*/
margin-top: /*负的自身高度一半*/
}
七、总结
以上的六种方法的兼容性我没有一一测试,如果读者有好的意见,希望您提出来,谢谢
html整体垂直居中,实现HTML元素垂直居中的六种方法相关推荐
- [知识点滴]HTML5元素垂直居中那些事?
###一 摘要 让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:center;:如果是一个块元素,我们可以使用margin:auto;.然 ...
- 如何垂直居中一个浮动元素
如何垂直居中一个浮动元素 // 方法一:已知元素的高宽 #div1{ width:200px; height:200px; position: absolute; /*父元素需要相对定位 ...
- 浮动div 内部元素 垂直居中
浮动div 内部元素 垂直居中 在内部放个div 2,要居中元素放进去 div 2{ height: 50px; line-height: 50px; display: table-cell; ve ...
- 利用CSS让元素垂直居中的两种实现方法
利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法 方法一:利用行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之 ...
- 用 CSS 实现元素垂直居中,有哪些好的方案?
DIV居中的经典方法 1. 实现DIV水平居中 设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1 div{ 2 width: 100px; 3 he ...
- 元素垂直居中,有几种方法?
写在前面 CSDN话题挑战赛第1期 活动详情地址:https://marketing.csdn.net/p/bb5081d88a77db8d6ef45bb7b6ef3d7f 参赛话题:前端面试宝典 话 ...
- html表格垂直居中的CSS代码,使用3行CSS代码使任何元素垂直居中
在页面设计中,使元素水平居中是比较简单的事情.但是如何使元素垂直居中呢?其实,我们通过3行CSS代码(不包括添加浏览器厂商所需的代码)就可以使任何元素垂直居中.秘诀就是使用transform: tra ...
- div垂直居中-CSS元素垂直居中方法
div垂直居中-CSS元素垂直居中方法分2类: 1.文本垂直居中的解决方案-2种 https://edu.csdn.net/course/play/9950/211677 2.块级元素垂直居中的解决方 ...
- CSS 元素垂直居中
CSS 元素垂直居中 display: flex; /*任何一个容器都可以指定为Flex布局*/ justify-content: center; /*主轴(横轴)方向上的对齐方式*/ align-i ...
最新文章
- MFC应用程序中添加控制台窗口
- matlab simulink 四分之一1/4车辆垂向振动模型 轮毂电机
- TensorFlow for Hackers - Part III
- 【转】Epoll模型
- 用CSS伪类制作一个不断旋转的八卦图?
- MPEG-2TS码流编辑的原理及其应用(转载
- SpringBoot整合Redis入门
- 小米全新潮流系列小米Civi首销5分钟销售额突破2亿元
- import sun.misc.BASE64Decoder;import sun.misc.BASE64Encoder; 报错的解决方法
- T-SQL: 读取磁盘文件
- 电源大师课笔记 2.7
- S-MAC协议的相关知识
- 单例模式【饿汉模式和懒汉模式异同点】
- NOIP 2015 推销员
- 狂神说docker 常用命令笔记
- 机器学习中处理缺失值的7种方法
- 【C语言每日一练——第1练:字母大小写转换】
- Flutter-常见问题
- springboot中service中注入dao失败测试类中注入成功_聊一聊 Java 服务端中的乱象
- me511完美刷GMS,可以使用android market,同步gmail联系人,使用google导航
热门文章
- ATM (Asynchronous Transfer Mode)异步传输模式
- linux输入特殊符号密码,linux 输入特殊符号
- Python项目实战:绕圈圈面试题
- dede获取顶级栏目
- CAD怎么设置十字光标大小?CAD十字光标设置
- JavaScript进阶 - 第9章 DOM对象,控制HTML元素
- 前端技术(7) : 省市区联动并设置默认值II
- 报错:找不到模块“antd-mobile (也可以是其他的模块)”或其相应的类型声明。
- 这一次,F1Delta Time 大奖赛来到欧洲
- springcloud官方文档,中英文双版