CSS差缺补漏:《高频面试题----使元素水平垂直居》

面试中经常会被问到如何使元素水平垂直居中，有哪些方法可以做到？

针对此问题，特意总结如下~

方法一： 定位（主要是值子绝父相）与margin负值配合----依赖于子元素宽/高

(使用绝对定位或固定定位后，所有元素，不管是行内元素还是行内块元素、块状元素，都可以定义宽高)

该方法适合子元素宽/高已知的情况~

1.  
   <div class="box">
2.  
   <span class="box1"></span>
3.  
   </div>

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   background-color: rgb(220, 230, 245);
5.  
   /* 父相 */
6.  
   position: relative;
7.  
   }
8.  
    
9.  
   .box1 {
10.  
    width: 100px;
11.  
    height: 100px;
12.  
    background-color: yellow;
13.  
    position: absolute;
14.  
    /* 定位距离上面50% */
15.  
    top: 50%;
16.  
    /* 定位距离左侧50% */
17.  
    left: 50%;
18.  
    /* 定位在往下退自身高度的50%，即100*50% = 50px */
19.  
    margin-top: -50px;
20.  
    /* 定位在往左退自身高度的50%，即100*50% = 50px */
21.  
    margin-left: -50px;
22.  
    }

 

方法二： 定位（主要是值子绝父相）与变换负值配合----不依赖于子元素宽/高

(使用绝对定位或固定定位后，所有元素，不管是行内元素还是行内块元素、块状元素，都可以定义宽高)

该方法在子元素宽/高已知或未知的情况下都适合~

1.  
   <div class="box">
2.  
   <span class="box1">很好很好很好很好很好很好很好很好很好很好</span>
3.  
   </div>

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   background-color: rgb(220, 230, 245);
5.  
   position: relative;
6.  
   }
7.  
    
8.  
   .box1 {
9.  
   background-color: yellow;
10.  
    position: absolute;
11.  
    top: 50%;
12.  
    left: 50%;
13.  
    /* box1左移自身宽度的50% 上移自身高度的50% */
14.  
    transform: translateX(-50%) translateY(-50%);
15.  
    }

 

方法三：定位与margin: auto配合

该方法适合于子元素宽/高已知的情况~

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   background-color: rgb(220, 230, 245);
5.  
   /* 父相 */
6.  
   position: relative;
7.  
   }
8.  
   .box1 {
9.  
   width: 100px;
10.  
    height: 100px;
11.  
    background-color: yellow;
12.  
    position: absolute;
13.  
    /* 以下都不可缺省 */
14.  
    left: 0;
15.  
    top: 0;
16.  
    right: 0;
17.  
    bottom: 0;
18.  
    margin: auto;
19.  
    }

  

 方法四：利用flex布局

(使用flex布局后，所有元素，不管是行内元素还是行内块元素、块状元素，都可以定义宽高）

该方法适合于宽/高已知/未知的情况~

1.  
   <div class="box">
2.  
   <span class="box1"></span>
3.  
   </div>

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   background-color: rgb(220, 230, 245);
5.  
   display: flex;
6.  
   /* 设置主轴方向居中 */
7.  
   justify-content: center;
8.  
   /* 设置侧轴方向居中 */
9.  
   align-items: center;
10.  
    }
11.  
     
12.  
    .box1 {
13.  
    width: 100px;
14.  
    height: 100px;
15.  
    background-color: yellow;
16.  
    }

方法五： 针对行内元素的居中对齐方法

单行文本（给父元素加上）：

        水平居中： text-align: center

        垂直居中： height = line-height

1.  
   <div class="box">
2.  
   <span class="box1">很好</span>
3.  
   </div>

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   line-height: 200px;
5.  
   background-color: rgb(220, 230, 245);
6.  
   text-align: center;
7.  
   }
8.  
    
9.  
   .box1 {
10.  
    background-color: yellow;
11.  
    }

方法六： 针对行内元素的居中对齐方法

多行文本：

       display: table（给父元素加上）

       display: table-cell（给子元素加上）

       vertical-align: middle（给子元素加上）

       text-aline: center（给子元素加上）

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   background-color: rgb(220, 230, 245);
5.  
   display: table;
6.  
   }
7.  
   .box1 {
8.  
   display: table-cell;
9.  
   vertical-align: middle;
10.  
    text-align: center;
11.  
    }

方法七： 针对行内元素的居中对齐方法

多行文本：

       display: grid（给父元素加上）

       margin: auto（给子元素加上）

       text-aline: center（给子元素加上）

1.  
   .box {
2.  
   width: 200px;
3.  
   height: 200px;
4.  
   background-color: rgb(220, 230, 245);
5.  
   display: grid;
6.  
   }
7.  
   .box1 {
8.  
   background-color: yellow;
9.  
   margin: auto;
10.  
    text-align: center;
11.  
    }

 

这篇好文章是转载于：学新通技术网