CSS水平垂直居中

不念不忘少年蓝@ 2022-11-12 08:18 437阅读 0赞 
  1.     在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快速应用。下面将介绍文字、图片和行内块元素的水平垂直居中的css样式写法。

1. 文字水平居中

1.1 text-align:center; 和line-height: 元素的高度

  1.     文字水平居中，实现方法是给其父元素添加css：text-align ： center；
  3.     文字垂直居中，实现方法是给父元素添加css：  line-height：所在父元素的高度，如父元素的 height：200px，则  line-height：200px。
  5.     文字水平垂直居中，则上述两个方法都使用即可实现。
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10.     <meta charset="UTF-8">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.     <title>Document</title>
  14.     <style>
  15.         body,#app{
  16.             text-align: center; //文字水平居中
  17.         }
  18.         #app{
  19.             width: 200px;
  20.             height: 200px;
  21.             line-height: 200px;
  22.             background-color: brown;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="app">
  28.         文字水平垂直居中
  29.     </div>
  30. </body>
  31. </html>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70

1.2 diaplay：table-cell；和vertical-align：middle；

  1.      此种方法可以让文字垂直居中，具体实现是给文字所在的父元素设置css样式：   display：table-cell；vertical-align：middle；这样文字就会垂直居中
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>Document</title>
  10.     <style>
  11.         #app{     
  12.             width: 300px;
  13.             height: 300px;
  14.             background-color:darkgray;
  15.             display: table-cell;
  16.             vertical-align: middle;
  17.         }     
  18.     </style>
  19. </head>
  20. <body>
  21.     <div id="app">   
  22.         水平垂直居中
  23.         <!--<img src="./image0.png" width="198px" height="198px" alt="">-->
  24.     </div>
  25. </body>
  26. </html>

效果图

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1

2.图片元素和行内块级元素的水平和垂直居中

  1.    图片元素和行内块级样式的水平和垂直居中css设置方法是一样的。为了简便，以下就以图片元素为例来展示效果。

2.1 text-align：center

  1.    给图片img元素所在的父元素设置css：text-align：center； ，即可实现图片水平居中。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #app{     
  10.             width: 300px;
  11.             height: 300px;
  12.             background-color:darkgray;
  13.             text-align: center;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div id="app">   
  19.         <img src="./image0.png" alt="">
  20.     </div>
  21. </body>
  22. </html>
  24.     效果图如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2

2.2 display：table-cell； 和 vertical-align：center；

  1.    给图片元素所在的父元素，设置样式：  display：table-cell；vertical-align：center；，即可 实现图片在父元素内垂直居中。
  3.     代码如下：
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>Document</title>
  12.     <style>
  13.         #app{     
  14.             width: 300px;
  15.             height: 300px;
  16.             background-color:darkgray;
  17.             display: table-cell;
  18.             vertical-align: middle;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <div id="app">   
  24.         <img src="./image0.png" alt="">
  25.     </div>
  26. </body>
  27. </html>
  29.     效果图如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3

2.3 position/left/margin-left

  1.     该方法可以实现图片的水平居中，具体方法是：给图片所在的父元素设置样式：  **position：relative; **  给图片元素设置样式： **position：absolute；left：50%；margin-left：图片元素宽度的一半的负值。**
  3.     代码如下：
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>Document</title>
  12.     <style>
  13.         #app{     
  14.             width: 300px;
  15.             height: 300px;
  16.             background-color:darkgray;
  17.             position: relative;
  18.         }
  19.         img{
  20.             position: absolute;
  21.             left: 50%;
  22.             margin-left: -99px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="app">   
  28.         <img src="./image0.png" width="198px" height="198px" alt="">
  29.     </div>
  30. </body>
  31. </html>
  33.     效果如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4

2.4 position/left/transform

  1.     该方法可以实现图片在父元素中水平居中。
  3.    实现方法是：给图片所咋的父元素设置css：  ** position：relative；**，给图片元素设置：  **position:absolute；left：50%； transform：translate(-50%,0)。**代码如下：
  5. <!DOCTYPE html>
  6. <html lang="en">
  7. <head>
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.     <title>Document</title>
  12.     <style>
  13.         #app{     
  14.             width: 300px;
  15.             height: 300px;
  16.             background-color:darkgray;
  17.             position: relative;
  18.         }
  19.         img{
  20.             position: absolute;
  21.             left: 50%;
  22.             transform:translate(-50%,0);
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div id="app">   
  28.         <img src="./image0.png" width="198px" height="198px" alt="">
  29.     </div>
  30. </body>
  31. </html>
  33.     效果图如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5

2.5 display/justify-content

  1.      该方法可以实现图片的水平居中，具体实现方法是：给图片所在的父元素设置样式：**display：flex；和justify-content：center；**

见代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #app{     
  10.             width: 300px;
  11.             height: 300px;
  12.             background-color:darkgray;
  13.             display: flex;
  14.             justify-content: center;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="app">   
  20.         <img src="./image0.png" width="198px" height="198px" alt="">

效果图见2.4

2.6 display：flex；和 align-items：center；

  1.     该方法可以实现图片元素的垂直居中，具体方法是：给图片所在的父元素设置： **display：flex；align-items：center；** 。2.5和2.6方法结合，可以实现图片的水平和垂直居中。

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #app{     
  10.             width: 300px;
  11.             height: 300px;
  12.             background-color:darkgray;
  13.             display: flex;
  14.             align-items: center;
  15.             justify-content: center;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="app">   
  21.         <img src="./image0.png" width="198px" height="198px" alt="">
  22.     </div>
  23. </body>
  24. </html>

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 6

2.7 display: -webkit-box;-webkit-box-align: center;margin：0 auto；

  1.     该方法可以实现元素的水平居中，具体给元素设置样式：   **display: -webkit-box;   -webkit-box-align: center;margin：0 auto；**

代码见下图：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         #app{     
  10.             width: 300px;
  11.             height: 300px;
  12.             background-color:darkgray;
  13.         }
  14.         img{
  15.             width: 198px;
  16.             height: 198px;
  17.             display: -webkit-box;
  18.             -webkit-box-align: center;
  19.             margin: 0 auto;
  20.         }      
  21.     </style>
  22. </head>
  23. <body>
  24.     <div id="app">   
  25.         <img src="./image0.png" width="198px" height="198px" alt="">
  26.     </div>
  27. </body>
  28. </html>

效果图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 7

发表评论

表情：
评论列表 （有 0 条评论，437人围观）

还没有评论，来说两句吧...

相关阅读

    相关 CSS水平垂直居中

            在实际前端开发中，我们会遇到让一些元素居中的情况，如水平居中、垂直居中或者水平垂直居中等等。CSS的表示方法有很多，现在小编在这里总结一下，以便开发的时候可以快

    不念不忘少年蓝@不念不忘少年蓝@/ 0 赞/ 438 阅读