垂直水平居中的方式總結 +（使用場景）

kidyue發表於2017-11-15

以前前端面試基礎問題的時候經常會被問到這個問題：
但是從來沒有做過這樣的總結，網上很多人總結的很多，很好。自己幹了這麼多年，這個問題使用場景還是蠻多的，還是自己總結一下吧（不斷更新）

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以下的瀏覽器

相關文章