html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求。下边将五种常用的居中方法进行总结。
1:原始图(父子元素无border
,无padding
):
2:实现居中效果:
一:使用margin进行固定长度的偏移
在使用margin
进行具体高度的偏移时,需要知道父元素和子元素的具体的宽高尺寸
1:水平方向居中
在进行水平方向上的居中时,可对子元素样式使用
margin:0 auto;
2:垂直方向居中
在使用margin
进行垂直方向上的居中时,至少要满足三个条件中的一条才能达到垂直居中的效果,否则子元素和父元素会一同被带下来。这涉及到margin
的合并,在我的另一篇博客《关于盒子模型中margin
叠加现象的归类与思考》中我对这个现象经过查阅资料和实验做出了个人的推断理解。三种前提条件分别是:
1)为父元素设置border
;
2)为父元素设置padding
;
3)在父元素中添加overflow:hidden
的样式。(在标准盒子模型中前两种会将盒子模型的既定尺寸扩充,在没必要设置padding
和border
时不建议使用前两种方法。)。
/*关键样式代码*/
#father{overflow: hidden;}#son{margin:0 auto;/*水平居中*/margin-top: 50px;}
**分析:**对父元素使用overflow:hidden
子元素使用margin-top
进行下移实现垂直居中。
**缺点:**在进行垂直居中时你需要明确父元素的height
,并且进行计算,如果父元素的高度变了,子元素将不再垂直居中,还要再修改数据,维护性极差。
二:使用绝对定位并进行偏移
1)首先需要将父元素样式设置position:relative
;
2)将子元素样式设置position:absolute
;
3)使用left
和top
进行定位实现居中;
注意: 只有在元素使用position:relative/absolute/fixed
才能使用top/left/bottom/right/z-index
属性,同时元素的float
,clear
会失效。
/关键样式代码/
#father{position:relative;}#son{position: absolute;left:50%;margin-left: -50px;top:50%;margin-top: -50px;}
注意: 在使用绝对定位进行百分比偏移时他是将子元素整体偏移到另半边,而不是将子元素的中轴线对准父元素的中轴线,所以还要使用margin-left:-50px
;将子元素的一半偏移回来。
/*优化代码(使用css样式中的计算公式)*/
#son{position: absolute;left:calc(50% - 50px);top:calc(50% - 50px);}
注意: 计算公式中的运算符前后都需要有空格隔开!!!
缺点: 在使用left/top
进行偏移50%
之后,再使用margin-top/left
偏移回子元素的一半。这就需要明白子元素的具体的尺寸,当子元素的尺寸有改变时,布局就会被破坏,维护性也极差。
三:使用绝对定位并margin自适应进行居中
1)首先需要将父元素样式设置position:relative
;
2)将子元素样式设置position:absolute
;
3)将left/top/bottom/right:0
;
4)margin:auto
;
/*关键样式代码*/
#father{position:relative;}#son{position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin:auto;}
分析: 这种居中方式采用的是流体自适应居中,将left/top/bottom/right
四个属性都设置为0
表示子模块相对于四条边的偏移量都是零,这时再放进去一个margin:auto;
,在满足前边四个属性的条件下进行margin
的auto
布局,就可以实现垂直居中。
优点: 维护性高,不需要知道父子元素的具体尺寸也可以实现居中的效果。
四: 使用table-cell进行居中显示
/*关键样式代码*/#father{display: table-cell;vertical-align: middle;}#son{margin: 0 auto;}
分析: 将父元素display
:设置为table-cell
,此时就可以使用vertical-align: middle
对内部的子元素进行垂直居中。之后在子元素样式中使用margin: 0 auto;
实现水平居中
注意: 父容器的设置display: table-cell;
后,如果想要将父容器本身使用margin
居中无法达到效果,因为margin
对display
为table-cell
的无效。涉及到table
的样式相对较为复杂,所以不建议使用。
五:使用弹性盒子来实现居中
css3
中提供了一种响应式布局的方案:弹性盒子。他可以适应不同屏幕的大小和不同的设备类型。同时,它也提供了更加有效地方式来对容器的子元素进行排列和对齐,以及分配剩余空白空间。但是由于现在弹性盒子是css3的新的布局模式,所以有些浏览器还没有兼容,需要添加一些浏览器前缀,以达到兼容的效果。
/*关键样式代码*/#father{display: flex;justify-content: center;align-items: center;}
分析: 设置display
为flex
,同时在默认情况下flex-direction
为row
,即主轴线为水平方向,副轴为垂直方向。设置justify-content
为center
,可以将元素在主轴(水平)方向上居中显示,设置align-items
可以将元素在副轴(垂直)方向上居中显示。
优点: 维护性高,而且弹性盒子可以完成浮动和定位所能达到的效果,而且相当的简便。
最后的总结
1)明确各方案的优缺点,即是否易于维护;
2)明白定位中的四个属性在偏移时,需要反方向移回一半的宽高。
3)熟记五个方案,针对不同场景灵活运用。
html中元素居中的五种方法相关推荐
- 在 Java 中初始化 List 的五种方法
转载自 在 Java 中初始化 List 的五种方法 Java 中经常需要使用到 List,下面简单介绍几种常见的初始化方式. 1.构造 List 后使用 List.add 初始化 List< ...
- php批量请求url_php中请求url的五种方法总结
本文主要给大家介绍了关于php中请求url的五种方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 五种方法: 前三种都是php基本的文件操作函数 curl()是php扩展需要开启,l ...
- CSS元素居中的5种方法分享。
转自:微点阅读 https://www.weidianyuedu.com 经常碰到有人在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参 ...
- css图片居中_网页元素居中的n种方法
导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...
- Java求两集合中元素交集的四种方法对比总结
hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 最近在做项目的时候有用到对两个集合中的元素进行对比求其交集的情况,因为涉及到的数据量比较大,所以在进行求两个集合中元素交集的时候,就应该考虑 ...
- React攻略秘籍二:React中使用css的五种方法(包括less与styled-compenents)
一.前言 相信学过vue与react的小伙伴们应该都知道react使用css是多么麻烦,他没有像vue一样的规定好的样式,没有给css规定的作用域这也就react中一个组件样式会出现干扰另外一个组件样 ...
- CSS绝对定位元素居中的几种方法
CSS居中绝对定位元素的方法,有很多种,下面是我收集的几种 1,div宽度未知1 <body><div style="position: absolute; left: 5 ...
- java list定义和初始化_在 Java 中初始化 List 的五种方法
Java 中经常需要使用到 List,下面简单介绍几种常见的初始化方式. 1.构造 List 后使用 List.add 初始化 这是最常规的做法,用起来不太方便. 2.使用 {{}} 双括号语法 这种 ...
- wireshark提取流量包中的文件_返璞归真——流量中提取文件的五种方法
0×00 简介 本期主要会教大家如何从流量中还原出来文件.下面我将会用5种办法来讲解. 0×01 网络流量提取文件(方法1) 1. 安装依赖 Default yum install -y lib ...
最新文章
- 金九银十征服、阿里、京东、字节跳动,的程序员和他们的公众号
- 全球支付平台paypal社招一面,二面合并面经
- debian下编译安装poco
- json文件中的双引号隐藏
- php页面空白如何解决,php页面空白怎么回事 php出现空白页的解决方法
- 经典排序算法(10)——基数排序算法详解
- android view滑动到顶部并固定在顶部
- int.TryParse非预期执行引发的思考 ASP.NET -- WebForm -- 给图片添加水印标记 Windows -- 使用批处理文件.bat删除旧文件...
- R 多变量数据预处理_超长文详解:C语言预处理命令
- Eclipse统计代码行数
- 深入浅出node.js游戏服务器开发1——基础架构与框架介绍
- CentOS系统安装FTP服务器
- 用html做网页作品,HTML5实例:用HTML5制作的网页的15个优秀案例
- 最全移动端UI设计规范,作为前端的你,了解多少?
- python3可视化-pyecharts图形库,大饼图Pie的创建和使用
- 影驰GAMER RGB DDR5-5600评测
- SQL注入攻击讲解及PHP防止SQL注入攻击的几种方法
- java.util.logging log4j,Java核心代碼(十)日志log4j,java.util.logging,commons-logging
- MSRA实习申请经验分享
- 机器学习初级算法之决策树
热门文章
- 微信小程序仿微信聊天
- epsxe安卓最新版下载_安卓版索尼ps模拟器(ePSXe)
- 超市综合信息管理系统系统可行性如何写
- 安卓系统里的声音通道
- 英文Assignment写作怎么学习基本步骤?
- 解决npm 安装依赖提示 Maximum call stack size exceeded问题
- Activity 的四种启动模式,singletop 和 singletask 区别是什么? 一般书签的使用模式是 singletop,那为什么不使用 singletask?
- java 井号转义字符,井号'#'用英语怎么说(计算机字符 - 英文读音)
- 时长两年半,WPS打开文档的速度慢竟被我成功解决了
- delphi 自定义控件_Delphi中的自定义组件开发