在css中将图标垂直居中怎么写

在CSS中将图标垂直居中，可以通过以下两种方式实现：

1. 使用flexbox布局：

可以将父元素设置为display: flex;，并设置align-items: center;，这样子元素就会垂直居中。

例如，HTML代码如下：

<div class="icon-wrapper">
  <i class="fa fa-star"></i>
</div>

CSS代码如下：

.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /*如果需要水平居中，可以添加此行*/
  height: 100px; /*设置高度，方便观察*/
}

2. 使用line-height属性：

可以将line-height的值设置为和父元素一样的高度，这样子元素就会垂直居中。

例如，HTML代码如下：

<div class="icon-wrapper">
  <i class="fa fa-star"></i>
</div>

CSS代码如下：

.icon-wrapper {
  height: 100px; /*设置高度，方便观察*/
  line-height: 100px; /*设置行高*/
  text-align: center; /*如果需要水平居中，可以添加此行*/
}

相关问题

css 块级元素垂直居中

要将CSS的块级元素垂直居中，可以使用以下方法：

1. 使用flex布局：可以将父元素设为flex容器，然后使用justify-content和align-items属性将子元素在垂直和水平方向上都居中。

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

2. 使用绝对定位和transform属性：可以将父元素相对定位，然后将子元素绝对定位，并使用transform属性的translate函数将子元素垂直居中。

   .container {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%;
     transform: translate(0, -50%);
   }

3. 使用表格布局：可以将父元素设为display: table，然后将子元素设为display: table-cell，并使用vertical-align属性将子元素垂直居中。

   .container {
     display: table;
   }
   .child {
     display: table-cell;
     vertical-align: middle;
   }

4. 使用grid布局：可以将父元素设为display: grid，并使用justify-items和align-items属性将子元素在垂直和水平方向上都居中。

   .container {
     display: grid;
     justify-items: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

以上是实现CSS块级元素垂直居中的常见方法，可以根据具体需求选择合适的方式来实现。

css字体怎么垂直居中

要让CSS中的字体垂直居中，可以使用下面的方法：

1. 将文本包装在一个容器中，并设置该容器的高度。

2. 给容器设置display: flex;属性，并使用align-items: center;属性来将文本垂直居中。

例如，如果你有一个高度为50px的容器，你可以使用以下CSS来实现文本的垂直居中：

.container {
  height: 50px;
  display: flex;
  align-items: center;
}