一、窗体居中
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: 220px; height: 45px; cursor: pointer; line-height: 45px; text-align: center; vertical-align: middle; color: #fff; font-size: 18px; font-weight: 600; } .nav .nav-item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; height: 25px; line-height: 25px; display: table-caption; } .nav span { position: relative; top: 0; bottom: 0; height: 25px; padding-left: 30px; display: inline-block; } .nav img { position: absolute; top: 0; left: 0; width: 25px; height: 25px; z-index: 10}
简析:
.nav:限制窗口大小;
【text-align:限制span水平居中】
.nav-item:控制内容垂直居中;
【display:限制内容并排显示】
.nav span:限制图片显示范围;
【padding-left:为图片留下显示空间;display:适应显示】
.nav img:限制图片大小与显示位置;