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 { width: 200px; height: 200px; background: yellow; position: relative;   
  2. } .wrap .center { width: 100px; height: 100px; background: green; margin: auto; position: absolute; left: 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{ width: 200px; height: 200px; background: yellow; display: table-cell; vertical-align: middle; text-align: center;   
  2. } .center{ display: inline-block; vertical-align: middle; width: 100px; height: 100px; background: green;   
  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 { position: relative; background: yellow; width: 200px; height: 200px;} .center { position: absolute; background: green; top:50%; left:50%; -webkit-transform:translate(⑸0%,⑸0%); transform:translate(⑸0%,⑸0%); width: 100px; height: 100px;   
  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 { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;   
  2. } .center { background: green; width: 100px; height: 100px;   
  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 { background: yellow; width: 200px; height: 200px; display: flex;    
  2. } .center { background: green; width: 100px; height: 100px; margin: auto;   
  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 { background: yellow; width: 200px; height: 200px; position: relative;   
  2. } /**方式1**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;    
  3.      
  4. } /**方式2**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-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 { height: 200px;/*高宽比值不可以少*/ width: 200px;/*宽度值不可以少*/ display: table; position: relative; float:left; background: yellow;   
  2. } .tableCell { display: table-cell; vertical-align: middle; text-align: center;           
  3.     *position: absolute; padding: 10px;   
  4.     *top: 50%;   
  5.     *left: 50%;   
  6. } .content {   
  7.     *position:relative;   
  8.     *top: ⑸0%;   
  9.     *left: ⑸0%; background: green;   
  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 { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;   
  2. } .center { background: green; width: 100px; height: 100px;   
  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 { background: yellow; width: 200px; height: 200px; display: flex;   
  2. } .center { background: green; width: 100px; height: 100px; margin: auto;   
  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 { background: yellow; width: 200px; height: 200px; position: relative;   
  2. } /**方式1**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;     
  3.      
  4. } /**方式2**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;   
  5. }   
  6.   

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

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

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