一招彻底理解CSS居中布局（附代码演示）

一、文本垂直居中

1. 使用 text-align: center;

   这是最简单直接的文本垂直居中方法，只需要在父元素上设置 text-align: center; 即可。

2. 使用 line-height

   line-height 属性可以设置元素的行高，也可以用于垂直居中文本。

   .text {
     line-height: 200px;
   }
   

   如果父元素的高度为 200px，那么文本将垂直居中显示。

二、行内元素垂直居中

1. 使用 vertical-align: middle;

   vertical-align 属性可以设置元素的垂直对齐方式。对于行内元素，可以使用 vertical-align: middle; 来实现垂直居中。

   .inline-element {
     vertical-align: middle;
   }
   

2. 使用 line-height

   与文本垂直居中类似，也可以使用 line-height 来垂直居中行内元素。

   .inline-element {
     line-height: 200px;
   }
   

   如果父元素的高度为 200px，那么行内元素将垂直居中显示。

三、行内块级元素垂直居中

1. 使用 vertical-align: middle;

   对于行内块级元素，也可以使用 vertical-align: middle; 来实现垂直居中。

   .inline-block-element {
     vertical-align: middle;
   }
   

2. 使用 line-height

   同样，也可以使用 line-height 来垂直居中行内块级元素。

   .inline-block-element {
     line-height: 200px;
   }
   

   如果父元素的高度为 200px，那么行内块级元素将垂直居中显示。

四、图片垂直居中

1. 使用 vertical-align: middle;

   对于图片，可以使用 vertical-align: middle; 来实现垂直居中。

   .image {
     vertical-align: middle;
   }
   

2. 使用 line-height

   也可以使用 line-height 来垂直居中图片。

   .image {
     line-height: 200px;
   }
   

   如果父元素的高度为 200px，那么图片将垂直居中显示。

五、单个块级元素垂直居中

1. 使用 table-cell

   可以将单个块级元素放在一个 <table> 元素中，并设置 display: table-cell; 和 vertical-align: middle; 来实现垂直居中。

   .block-element {
     display: table-cell;
     vertical-align: middle;
   }
   

2. 使用绝对定位

   也可以使用绝对定位来实现单个块级元素的垂直居中。

   .block-element {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   

3. 使用 flex

   还可以使用 flex 来实现单个块级元素的垂直居中。

   .flex-container {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .block-element {
     flex: 1;
   }
   

以上便是实现CSS垂直居中效果的五种方案，您可以根据实际需要选择合适的方案进行使用。