垂直水平居中的方式总结 +(使用场景)

以前前端面试基础问题的时候经常会被问到这个问题:
但是从来没有做过这样的总结,网上很多人总结的很多,很好。自己干了这么多年,这个问题使用场景还是蛮多的,还是自己总结一下吧(不断更新)

1。绝对定位居中

        width: 100px;  
        height: 100px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -60px; /* (width + padding)/2 */  
        margin-top: -60px; /* (height + padding)/2 */ 

使用场景:Modal弹层, Toast, 布局内容提示单行提示文字
优点:1.适用场景多。2.不用care了父级元素的大小。3.兼容ie6-7
缺点:1.子元素的宽高需固定。2.内容无法撑开父级容器

2.transform绝对定位

  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
  

使用场景:不用兼容IE9以下的Modal弹层,弹层的宽高均不固定
优点:1.适用场景多。2.内容宽高,容器宽高均不用care
缺点:1.不兼容IE9以下。2.内容无法撑开父级容器

3.margin+绝对定位

    margin: auto;  
    position: absolute;  
    top: 0; left: 0; bottom: 0; right: 0;  

使用场景:Modal弹层, Toast, 布局内容提示单行提示文字
优点:1.适用场景多。2.内容宽高,容器宽高均不用care。3.兼容性好
缺点:1.父级容器必须声明高度。2.内容无法撑开父级容器

4.表格容器居中

  display: table-cell;  
  vertical-align: middle;
  text-align: center;  

使用场景:容器内容居中,并不想脱离文档流。(具体场景想不起来啦)
优点:1.内容溢出会将父元素撑开。2.内容宽高,容器宽高均不用care。3兼容IE9以下。
缺点:1.不适用于Modal弹层这种盖住页面内容的布局

5.使用line-height和text-align垂直居中

    text-align: center;
    height: 100px; 
    line-height: 100px;/*值等于元素高度的值*/

使用场景:一个容器内部的当韩文字居中
优点:1.内容宽高,容器宽高均不用care。 2. 兼容性好
缺点:1.内容必须是inline或者inline-block的单行文本,不支持多行文本。

6.Flex布局

   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older             WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

使用场景:微信小程序和一些不需要兼容IE的移动端H5开发
优点:1.内容宽高,容器宽高均不用care。
缺点:1.不兼容IE10以下的浏览器

你可能感兴趣的