如何在 React js 中垂直居中图标 - CSS

在 React 中，我们有时需要将图标垂直居中，这可能是一个棘手的问题。本文将介绍如何使用 CSS 将图标垂直居中。

方法一：使用 Flexbox

Flexbox 是一种非常强大的 CSS 布局模型，它可以让我们轻松地对元素进行垂直和水平居中。在 React 中，我们可以使用 Flexbox 来垂直居中图标。

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

这里，我们将 .container 设为 Flex 容器，设置 align-items 和 justify-content 均为 center，这样我们在 .container 中的任何元素都将被垂直和水平居中。

import React from "react";

const IconBox = () => (
  <div className="container">
    <i className="fa fa-heart"></i>
  </div>
);

export default IconBox;

这里我们会得到一个带有一个垂直居中图标的容器。

方法二：使用绝对定位

我们可以使用绝对定位来垂直居中图标。我们需要对容器和图标分别设置 position: relative 和 position: absolute。对于图标，我们还需要设置 top: 50% 以将其垂直居中。

.container {
  position: relative;
}

i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

import React from "react";

const IconBox = () => (
  <div className="container">
    <i className="fa fa-heart"></i>
  </div>
);

export default IconBox;

这里我们会得到一个带有一个垂直居中图标的容器。

方法三：使用表格布局

另一种方法是使用表格布局来垂直居中我们的图标。我们可以将我们的容器设为一个表格，然后将图标放在表格单元格中，因此它将自动垂直居中。

.container {
  display: table;
}

i {
  display: table-cell;
  vertical-align: middle;
}

import React from "react";

const IconBox = () => (
  <div className="container">
    <i className="fa fa-heart"></i>
  </div>
);

export default IconBox;

这里我们会得到一个带有一个垂直居中图标的容器。

以上是三种将图标垂直居中的方法，您可以根据项目需求选择适合您的方法。