当面试官问起CSS布局之水平垂直居中时~~

最近面试的时候,面试官问到了CSS水平垂直居中布局的方式,对于刚入前端没多久的我,无疑是一脸懵逼,闲了赶紧查阅资料分析一波,给各位分享一下,避免落坑。
首先先说明一下html和一些基础css样式,下面就不再赘述!
html

<body>
		<div class="div1">
			<div class="box  size">垂直水平居中</div>
		</div>
	</body>

公共css代码如下

<style type="text/css">
			/* 公共样式 */
			.div1{
				width: 300px;
				height: 300px;
				border:1px solid aqua;
				
			}
			.box{
				background: #00FFFF;
			}
			.box.size{
				width:100px;
				height:100px;
			}
</style>

这些css样式在后续介绍中默认带上,不再赘述!

一、 absolute 和 margin auto(常用)

同样居中元素的宽高必须固定,并且需要得知子元素的宽高
这种方式通过设置各个方向的距离都是0,此时再将margin设为auto,就可以在各个方向上居中了

.div1{
				position: relative;
			}
			.box{
				position: absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				
				margin: auto;
			}

二、absolute 和margin(负值)

简单说一下原理,利用了绝对定位,绝对定位的百分比是相对于父元素的宽高,所以我们可以根据这个原理将元素居中显示。但是要注意:绝对定位是基于子元素的左上角来说的,但是要想让子元素居中显示,就要解决这个问题。
此时可以利用margin的负值来实现效果,当外边距为负值时,元素向相反方向定位,这样我们将子元素的外边距设置为子元素的宽高的一半就可以实现了。(PS:缺点就是必须得到子元素的宽高)

.div1{
				position: relative;
			}
			.box{
				top: 50%;
				left: 50%;
				position: absolute;
				margin-top: -50px;
				margin-left: -50px;
			} 

三、absolute 和 calc

同样需要子元素的宽高固定,并知道宽高,css3具有计算属性。
top的百分比是基于元素左上角减去宽度的一半即可(PS:依赖calc的兼容性)

.div1{
			   position: relative;
		   }
		   .box{
			   position: absolute;
			   top: calc(50% - 50px ); 
				/* 减号前后没有空格,该样式不生效*/
			   left: calc(50% - 50px );
		   }

当我在写这段代码的时候,发现一个有趣的事情,calc(50%-50px)如果减号前后没有空格的话,样式就不会生效,写上空格的话,就会正常生效了,具体原因我也不太清楚emmmmm

下面的方法将不需要知晓子元素的宽高即可设置
html修改为:

<body>
		<div class="div1">
			<div class="box">水平垂直居中,不需要子元素固定宽高</div>
		</div>
	</body>

公共css如下

	.div1{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
			.box{
				background: #00FFFF;
			}

四、flex(常用)

flex是现代的布局方案仅仅需要几行代码即可实现居中效果

.div1{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			

五、lineheight

利用行内元素居中属性也可以做到水平垂直居中。把box设置为行内元素,通过text-align就可以实现水平居中vertical-align 也可以在垂直方向做到居中(PS:这种方法需要在子元素中将文字显示重置为想要的效果)

          .div1{
				line-height: 300px;
				text-align: center;
				font-size: 0px;
			}
			.box{
				font-size: 10px;
				display: inline-block;
				vertical-align: middle;
				line-height:initial;
				/* 修正文字 */
			 	text-align: left;
	        }

六、absolute 和 transform

不需要子元素宽高固定,但是依赖于translate2d的兼容性

           .div1{
				position: relative;
			}
			.box{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}

七、css-table

css新增的table属性,可以把普通元素改变为table元素的显示效果,也可以实现水平居中

           .div1{
				display:table-cell;
				text-align: center;
				vertical-align: middle;
			}
			.box{
				display:inline-block;
			}

以上就是我总结的一些居中布局的方法了,还有什么其他的欢迎补充!
个人感觉: 我比较喜欢 absolute +margin auto 、flex、absolute 和 transform,移动端最好用flex吧,pc端我喜欢absolute +margin auto

如果感觉对你有所帮助,请动动小手点个赞吧!你的点赞就是给我的最大支持

已标记关键词 清除标记
课程简介: 历经半个多月的间,Debug亲自撸的 “企业员工角色权限管理平台” 终于完成了。正如字面意思,本课程讲解的是一个真正意义上的、企业级的项目实战,主要介绍了企业级应用系统中后端应用权限的管理,其中主要涵盖了六大核心业务模块、十几张数据库表。 其中的核心业务模块主要包括用户模块、部门模块、岗位模块、角色模块、菜单模块和系统日志模块;与此同,Debug还亲自撸了额外的附属模块,包括字典管理模块、商品分类模块以及考勤管理模块等等,主要是为了更好地巩固相应的技术栈以及企业应用系统业务模块的开发流程! 核心技术栈列表: 值得介绍的是,本课程在技术栈层面涵盖了前端和后端的大部分常用技术,包括Spring Boot、Spring MVC、Mybatis、Mybatis-Plus、Shiro(身份认证与资源授权跟会话等等)、Spring AOP、防止XSS攻击、防止SQL注入攻击、过滤器Filter、验证码Kaptcha、热部署插件Devtools、POI、Vue、LayUI、ElementUI、JQuery、HTML、Bootstrap、Freemarker、一键打包部署运行工具Wagon等等,如下图所示: 课程内容与收益: 总的来说,本课程是一门具有很强实践性质的“项目实战”课程,即“企业应用员工角色权限管理平台”,主要介绍了当前企业级应用系统中员工、部门、岗位、角色、权限、菜单以及其他实体模块的管理;其中,还重点讲解了如何基于Shiro的资源授权实现员工-角色-操作权限、员工-角色-数据权限的管理;在课程的最后,还介绍了如何实现一键打包上传部署运行项目等等。如下图所示为本权限管理平台的数据库设计图: 以下为项目整体的运行效果截图: 值得一提的是,在本课程中,Debug也向各位小伙伴介绍了如何在企业级应用系统业务模块的开发中,前端到后端再到数据库,最后再到服务器的上线部署运行等流程,如下图所示:
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页