Spirit带你了解CSS各个方向的居中方案

2023-1-7

 [[425798]]

水平居中和垂直居中的方案

先看HTML的骨架

后面的代码都是基于这个来写的

 
 
 
    
  
  
  
  1. <!DOCTYPE html> 
    2. 
  
  
  
  2. <html lang="en"> 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. <head> 
    5. 
  
  
  
  5.     <meta charset="UTF-8"> 
    6. 
  
  
  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    7. 
  
  
  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    8. 
  
  
  
  8.     <title>Document</title> 
    9. 
  
  
  
  9. </head> 
    10. 
  
  
  
  10. <link rel="stylesheet" href="./style.css"> 
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12. <body> 
    13. 
  
  
  
  13.     <div class="box vertical align"></div> 
    14. 
  
  
  
  14. </body> 
    15. 
  
  
  
  15. </html> 
    16.

水平居中

1. 通过 margin 水平居中

 
 
 
    
  
  
  
  1. /* 1. 通过margin 水平居中 */ 
    2. 
  
  
  
  2. .box { 
    3. 
  
  
  
  3.     width: 200px; 
    4. 
  
  
  
  4.     height: 200px; 
    5. 
  
  
  
  5.     background-color: orange; 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. .align { 
    8. 
  
  
  
  8.     margin: 0 auto; 
    9. 
  
  
  
  9. } 
    10.

2. 通过 position 和 transform 水平居中

 
 
 
    
  
  
  
  1. /* 2.通过 position 和 transform 水平居中 */ 
    2. 
  
  
  
  2. .box { 
    3. 
  
  
  
  3.     width: 200px; 
    4. 
  
  
  
  4.     height: 200px; 
    5. 
  
  
  
  5.     background-color: orange; 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. .align { 
    8. 
  
  
  
  8.     position: relative; 
    9. 
  
  
  
  9.     left: 50%; 
    10. 
  
  
  
  10.     transform: translateX(-50%); 
    11. 
  
  
  
  11. } 
    12.

3. 通过flex水平居中

 
 
 
    
  
  
  
  1. body {  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.     display: flex;  
    4. 
  
  
  
  4.     justify-content: center;  
    5. 
  
  
  
  5. }  
    6.

通过 text-align:center 水平居中

注意:使用text-align的时候,子元素要设置为行内块元素,是利用了行内元素的特性

 
 
 
    
  
  
  
  1. body { 
    2. 
  
  
  
  2.     text-align: center; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. .box { 
    5. 
  
  
  
  5.     display: inline-block; 
    6. 
  
  
  
  6.     width: 200px; 
    7. 
  
  
  
  7.     height: 200px; 
    8. 
  
  
  
  8.     background-color: orange; 
    9. 
  
  
  
  9. } 
    10.

垂直居中

1. flex布局垂直居中

可以在父类上加 align-item:center实现垂直居中

 
 
 
    
  
  
  
  1. body { 
    2. 
  
  
  
  2.     height: 100vh; 
    3. 
  
  
  
  3.     display: flex; 
    4. 
  
  
  
  4.     align-items: center; 
    5. 
  
  
  
  5. } 
    6.

也可以在子类元素上加 align-self:center 实现垂直居中

 
 
 
    
  
  
  
  1. .box { 
    2. 
  
  
  
  2.     align-self: center; 
    3. 
  
  
  
  3.     width: 200px; 
    4. 
  
  
  
  4.     height: 200px; 
    5. 
  
  
  
  5.     background-color: orange; 
    6. 
  
  
  
  6. } 
    7.

通过position和transform 来垂直居中

 
 
 
    
  
  
  
  1. /* 第二种方案 position和transform */ 
    2. 
  
  
  
  2. .vertical{ 
    3. 
  
  
  
  3.     position: relative; 
    4. 
  
  
  
  4.     top: 50%; 
    5. 
  
  
  
  5.     transform: translateY(-50%); 
    6. 
  
  
  
  6. } 
    7.

绝对居中

flex布局实现绝对居中

 
 
 
    
  
  
  
  1. body { 
    2. 
  
  
  
  2.     height: 100vh; 
    3. 
  
  
  
  3.     display: flex; 
    4. 
  
  
  
  4.     align-items: center; 
    5. 
  
  
  
  5.     justify-content: center; 
    6. 
  
  
  
  6. } 
    7.

通过 position和transform 实现绝对居中

 
 
 
    
  
  
  
  1. /* 第二种方案 position和transform */ 
    2. 
  
  
  
  2. .box { 
    3. 
  
  
  
  3.     position: relative; 
    4. 
  
  
  
  4.     top: 50%; 
    5. 
  
  
  
  5.     left: 50%; 
    6. 
  
  
  
  6.     transform: translate(-50%, -50%); 
    7. 
  
  
  
  7. } 
    8.

 

版权声明：
作者：后浪云
链接：https://www.idc.net/help/345903/
文章版权归作者所有，未经允许请勿转载。
THE END
Copyright © 2025 后浪云 网站地图