您的位置:首页 > Web前端 > > 正文

css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)

更多 时间:2022-01-17 01:03:05 类别:Web前端 浏览量:2421

css实现水平垂直居中的方式有哪些

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

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

方法一:position加margin

  • XML/HTML Code复制内容到剪贴板
    1. <li class="wrap">  
    2.     <li class="center"></li>  
    3. </li>  
    4.   
  • CSS Code复制内容到剪贴板
    1. /**css**/ .wrap { width200pxheight200pxbackgroundyellowpositionrelative;   
    2. } .wrap .center { width100pxheight100pxbackgroundgreenmarginautopositionabsoluteleft: 0; rightright: 0; top: 0; bottombottom: 0;   
    3. }  
  • 兼容性:主流浏览器均支持,IE6不支持

    方法二:diaplay:table-cell

  • XML/HTML Code复制内容到剪贴板
    1. <!-- html -->  
    2. <li class="wrap">  
    3.      <li class="center"></li>  
    4. </li>  
    5.   
  • CSS Code复制内容到剪贴板
    1. /*css*/ .wrap{ width200pxheight200pxbackgroundyellowdisplaytable-cellvertical-alignmiddletext-aligncenter;   
    2. } .centerdisplayinline-blockvertical-alignmiddlewidth100pxheight100pxbackgroundgreen;   
    3. }   
    4.   
  • 兼容性:由于display:table-cell的原因,IE67不兼容

    方法三:position加 transform

  • XML/HTML Code复制内容到剪贴板
    1. <!-- html -->  
    2. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
    5.   
  • CSS Code复制内容到剪贴板
    1. /* css */ .wrap { positionrelativebackgroundyellowwidth200pxheight200px;} .center { positionabsolutebackgroundgreentop:50%; left:50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); width100pxheight100px;   
    2. }   
    3.   
  • 兼容性:ie9以下不支持 transform,手机端表现的比较好。

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

  • XML/HTML Code复制内容到剪贴板
    1. <!-- html -->  
    2. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
    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. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
  • CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex;    
    2. } .center { backgroundgreenwidth100pxheight100pxmarginauto;   
    3. }   
    4.   
  • 移动端首选

    方法六:纯position

  • XML/HTML Code复制内容到剪贴板
    1. <!-- html -->  
    2. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
    5.   
  • CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxpositionrelative;   
    2. /**方法一**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft50pxtop50px;    
    3.      
    4. /**方法二**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft: 50%; top: 50%; margin-left:-50pxmargin-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. <!-- html -->  
    2. <li class="table">  
    3.     <li class="tableCell">  
    4.         <li class="content">不固定宽高,自适应</li>  
    5.     </li>  
    6. </li>  
    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: -50%;   
    9.     *left: -50%; backgroundgreen;   
    10. }   
    11.   
  • 暂时总结上面的七种,这种方法太多,其实只要习惯了其中的一两种也就够用了。

    总结

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

  • XML/HTML Code复制内容到剪贴板
    1. <!-- html -->  
    2. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
    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. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
    5.   
  • CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxdisplay: flex;   
    2. } .center { backgroundgreenwidth100pxheight100pxmarginauto;   
    3. }   
    4.   
  • 如果是PC端,要考虑兼容性的话。方法六是不错滴,也就是纯position。

  • XML/HTML Code复制内容到剪贴板
    1. <!-- html -->  
    2. <li class="wrap">  
    3.     <li class="center"></li>  
    4. </li>  
    5.   
  • CSS Code复制内容到剪贴板
    1. /* css */ .wrap { backgroundyellowwidth200pxheight200pxpositionrelative;   
    2. /**方法一**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft50pxtop50px;     
    3.      
    4. /**方法二**/ .center { backgroundgreenpositionabsolutewidth100pxheight100pxleft: 50%; top: 50%; margin-left:-50pxmargin-top:-50px;   
    5. }   
    6.   
  • 如果PC端的中间的元素高度不固定,那么就用方法七即可,代码就不复制了。

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

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣