cari

Rumah >hujung hadapan web >tutorial css >css让容器水平垂直居中的7种方式

css让容器水平垂直居中的7种方式

巴扎黑
巴扎黑asal
2017-05-21 10:31:152565semak imbas

这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这种css布局平时用的比较多，也是面试题常出的一个题，网上一搜一大丢，不过还是想自己总结一下。
这种方法比较多，本文只总结其中的几种，以便加深印象。
效果图都为这个：

方法一：position加margin


XML/HTML Code复制内容到剪贴板

  1. <p class="wrap">  

  2.     <p class="center">p>  

  3. p>  

  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不支持

方法二：diaplay:table-cell


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="wrap">  

  3.      <p class="center">p>  

  4. p>  

  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不兼容

方法三：position加 transform


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  

  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(-50%,-50%); transform:translate(-50%,-50%); width: 100px; height: 100px;   

  2. }   

  3.   

兼容性：ie9以下不支持 transform，手机端表现的比较好。

方法四：flex;align-items: center;justify-content: center


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  

  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.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  


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.   

移动端首选

方法六：纯position


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  

  5.   


CSS Code复制内容到剪贴板

  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;   

  2. } /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;    

  3.      

  4. } /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;   

  5. }   

  6.   

兼容性：适用于所有浏览器

方法六中的方法一计算公式如下：
子元素（conter）的left值计算公式：left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
子元素（conter）的top值计算公式：top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;
方法二计算公式：
left值固定为50%;
子元素的margin-left= -（子元素的宽/2）=-100/2= -50px;
top值也一样，固定为50%
子元素的margin-top= -（子元素的高/2）=-100/2= -50px;

方法七：兼容低版本浏览器，不固定宽高


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="table">  

  3.     <p class="tableCell">  

  4.         <p class="content">不固定宽高，自适应p>  

  5.     p>  

  6. p>  

  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: -50%;   

  9.     *left: -50%; background: green;   

  10. }   

  11.   

暂时总结上面的七种，这种方法太多，其实只要习惯了其中的一两种也就够用了。

总结

如果是移动端，那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况，快、准、狠
也就是用 flex; align-items: center; justify-content: center;


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  

  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.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  

  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端，要考虑兼容性的话。方法六是不错滴，也就是纯position。


XML/HTML Code复制内容到剪贴板

  1.   

  2. <p class="wrap">  

  3.     <p class="center">p>  

  4. p>  

  5.   


CSS Code复制内容到剪贴板

  1. /* css */ .wrap { background: yellow; width: 200px; height: 200px; position: relative;   

  2. } /**方法一**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50px; top: 50px;     

  3.      

  4. } /**方法二**/ .center { background: green; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left:-50px; margin-top:-50px;   

  5. }   

  6.   

如果PC端的中间的元素高度不固定，那么就用方法七即可，代码就不复制了。

这种css元素垂直的如果真的要总结起来，应该有十几二十几种。不过也没必要全部掌握吧，只要大概了解一些，用起来没有副作用就行。

Atas ialah kandungan terperinci css让容器水平垂直居中的7种方式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：详细分析关于CSS3中新增的特性Artikel seterusnya：利用CSS代码实现立方体360度旋转效果实例展示

Artikel berkaitan

Lihat lagi