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

2024年1月29日 97次阅读 来源: kidyue

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

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以下的浏览器

    原文作者：kidyue
    原文地址: https://segmentfault.com/a/1190000012017934
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞