首页 > 代码库 > 自适应居中
自适应居中
一、窗体居中
position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */
简析：
position:固定位置显示（absolute|fixed）；
【absolute：窗口大小由上层position为absolute、fixed、relative的子父关系窗口决定；fixed：窗口大小由上层层position为fixed的子父关系窗口决定】
top,right,bottom,left:设置偏移量（<value>|auto）；
【设置为auto时，表示窗口在该方向不居中显示；如：left:auto,则窗口在水平位置不居中显示】
margin:自适应布局（auto）;
【窗口只会在都为auto的方向上居中】
height,widht:可设置，也可不设置（<value>|auto）；
【不设置则由top,right,bottom,left决定大小】
二、文字、图片混合自适应居中
.nav { position: relative;float: left;width: 220 px;height: 45 px;cursor: pointer;line - height: 45 px;text - align: center;vertical - align: middle;color: #fff;font - size: 18 px;font - weight: 600; }.nav.nav - item { position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;height: 25 px;line - height: 25 px;display: table - caption; } .nav span { position: relative;top: 0;bottom: 0;height: 25 px;padding - left: 30 px;display: inline - block; } .nav img { position: absolute;top: 0;left: 0;width: 25 px;height: 25 px;z - index: 10 }简析：
.nav:限制窗口大小；
【text-align:限制span水平居中】
.nav-item:控制内容垂直居中；
【display:限制内容并排显示】
.nav span:限制图片显示范围；
【padding-left:为图片留下显示空间；display:适应显示】
.nav img:限制图片大小与显示位置；
自适应居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。