CSS 垂直和水平居中

在网页设计中，垂直和水平居中是非常常见的需求。CSS提供了多种方法来实现垂直和水平居中。本文将介绍一些常用的技术和示例代码。

水平居中

水平居中块级元素

要使块级元素水平居中，可以使用以下技术之一：

1. 使用text-align: center将父元素的文本内容水平居中，这也会导致子元素水平居中。

2. 使用margin设置左右边距为auto，可以将块级元素居中，这通常用于居中一个具有固定宽度的块级元素。示例代码：

   .center-block {
     width: 200px;
     margin-left: auto;
     margin-right: auto;
   }
   

水平居中行内元素

要使行内元素水平居中，可以使用以下技术之一：

1. 使用text-align: center将父元素的文本内容水平居中。

2. 将行内元素的父元素设置为display: flex，并使用justify-content: center将子元素水平居中。示例代码：

   .center-inline {
     display: flex;
     justify-content: center;
   }
   

垂直居中

垂直居中块级元素

要使块级元素垂直居中，可以使用以下技术之一：

1. 使用display: flex将父元素设置为弹性容器，并使用align-items: center将子元素垂直居中。示例代码：

   .center-block {
     display: flex;
     align-items: center;
   }
   

2. 使用position: absolute将子元素的定位方式设置为绝对定位，再使用top: 50%; transform: translateY(-50%)将子元素垂直居中。示例代码：

   .center-block {
     position: relative;
   }
   .center-block > div {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
   }
   

垂直居中行内元素

要使行内元素垂直居中，可以使用以下技术之一：

1. 使用display: flex将父元素设置为弹性容器，并使用align-items: center将子元素垂直居中。示例代码：

   .center-inline {
     display: flex;
     align-items: center;
   }
   

2. 使用line-height: xxx将父元素的行高设置为与父元素高度相等的值，可以将行内元素垂直居中。示例代码：

   .center-inline {
     line-height: 100px; /* 与父元素高度相等的值 */
   }
   

以上是一些常用的CSS技术，用于实现垂直和水平居中。你可以根据具体的需求选择适合你的方法。