css让器皿水平竖直垂直居中的7种方法

日期:2021-01-20 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

这类css合理布局平常用的较为多,也是招聘面试题常出的1个题,在网上1搜1大丢,但是還是想自身总结1下。
这类方式较为多,本文只总结在其中的几种,便于加深印象。
实际效果图都为这个:

方式1:position加margin

XML/HTML Code拷贝內容到剪贴板
  1. <div class="wrap">  
  2.     <div class="center"></div>  
  3. </div>  
  4.   
CSS Code拷贝內容到剪贴板
  1. /**css**/ .wrap { width200pxheight200pxbackgroundyellowpositionrelative;   
  2. } .wrap .center { width100pxheight100pxbackgroundgreenmarginautopositionabsoluteleft: 0; rightright: 0; top: 0; bottombottom: 0;   
  3. }  

适配性:流行访问器均适用,IE6不适用

方式2:diaplay:table-cell

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.      <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /*css*/ .wrap{ width200pxheight200pxbackgroundyellowdisplaytable-cellvertical-alignmiddletext-aligncenter;   
  2. } .centerdisplayinline-blockvertical-alignmiddlewidth100pxheight100pxbackgroundgreen;   
  3. }   
  4.   

适配性:因为display:table-cell的缘故,IE67兼容问题

方式3:position加 transform

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { positionrelativebackgroundyellowwidth200pxheight200px;} .center { positionabsolutebackgroundgreentop:50%; left:50%; -webkit-transform:translate(⑸0%,⑸0%); transform:translate(⑸0%,⑸0%); width100pxheight100px;   
  2. }   
  3.   

适配性:ie9下列不适用 transform,手机上端主要表现的较为好。

方式4:flex;align-items: center;justify-content: center

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex; align-items: centerjustify-contentcenter;   
  2. } .center { backgroundgreenwidth100pxheight100px;   
  3. }   
  4.   

挪动端首选

方式5:display:flex;margin:auto

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex;    
  2. } .center { backgroundgreenwidth100pxheight100pxmarginauto;   
  3. }   
  4.   

挪动端首选

方式6:纯position

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxpositionrelative;   
  2. /**方式1**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft50pxtop50px;    
  3.      
  4. /**方式2**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft: 50%; top: 50%; margin-left:-50pxmargin-top:-50px;   
  5. }   
  6.   

适配性:可用于全部访问器

方式6中的方式1测算公式以下:
子元素(conter)的left值测算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200⑴00) / 2=50px;
子元素(conter)的top值测算公式:top=(父元素的高 - 子元素的高 ) / 2=(200⑴00) / 2=50px;
方式2测算公式:
left值固定不动为50%;
子元素的margin-left= -(子元素的宽/2)=⑴00/2= ⑸0px;
top值也1样,固定不动为50%
子元素的margin-top= -(子元素的高/2)=⑴00/2= ⑸0px;

方式7:适配低版本号访问器,不固定不动宽高

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="table">  
  3.     <div class="tableCell">  
  4.         <div class="content">不固定不动宽高,自融入</div>  
  5.     </div>  
  6. </div>  
  7.   
CSS Code拷贝內容到剪贴板
  1. /*css*/ .table { height200px;/*高宽比值不可以少*/ width200px;/*宽度值不可以少*/ display: table; positionrelativefloat:leftbackgroundyellow;   
  2. } .tableCell { displaytable-cellvertical-alignmiddletext-aligncenter;           
  3.     *positionabsolutepadding10px;   
  4.     *top: 50%;   
  5.     *left: 50%;   
  6. } .content {   
  7.     *position:relative;   
  8.     *top: ⑸0%;   
  9.     *left: ⑸0%; backgroundgreen;   
  10. }   
  11.   

临时总结上面的7种,这类方式太多,实际上要是习惯性了在其中的1两种也就够用了。

总结

假如是挪动端,那末用方式4和方式5是较为便捷的。并且适用不固定不动宽高的状况,快、准、狠
也便是用 flex; align-items: center; justify-content: center;

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex; align-items: centerjustify-contentcenter;   
  2. } .center { backgroundgreenwidth100pxheight100px;   
  3. }   
  4.   

或display:flex;margin:auto;

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex;   
  2. } .center { backgroundgreenwidth100pxheight100pxmarginauto;   
  3. }   
  4.   

假如是PC端,要考虑到适配性的话。方式6是非常好滴,也便是纯position。

XML/HTML Code拷贝內容到剪贴板
  1. <!-- html -->  
  2. <div class="wrap">  
  3.     <div class="center"></div>  
  4. </div>  
  5.   
CSS Code拷贝內容到剪贴板
  1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxpositionrelative;   
  2. /**方式1**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft50pxtop50px;     
  3.      
  4. /**方式2**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft: 50%; top: 50%; margin-left:-50pxmargin-top:-50px;   
  5. }   
  6.   

假如PC端正中间的元素高宽比不固定不动,那末就用方式7便可,编码就不拷贝了。

这类css元素竖直的假如真的要总结起来,应当有10几210几种。但是也没必要所有把握吧,要是大约掌握1些,用起来沒有不良反应就行。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
上一篇:WEB规范实例教程:P标识的运用 返回下一篇:没有了