创建一个以内容为中心的CSS方块，最好使用语义UI 我有一个反应应用程序，在页面底部，在其余内容的下面，我想创建一个完美的正方形（我们通常使用图像，但我想避免它），中间有一个字母或图标。

我可以使用网格（即7列宽，第4列周围有3个空列）大致工作。我将中间列的样式设置为特定的颜色，但内部的文本开始。。。如果字体太大，请向右推。如果我使用图标，我会遇到类似的问题。有没有好的/正确的方法

添加代码示例

这是一个我正在尝试做的例子。我想把内容放在盒子的中央。我一次只显示一个框，框中有字母或图标。理想情况下，该框应位于页面中心，如下所示：

---

如果您包括代码和一个可视化的应用程序，这将变得容易得多。据我所知，你想要这样的东西：

。图标{
显示：网格；
网格模板列：重复（3，1fr）；
间隙：10px；
}
.包装纸{
位置：相对位置；
身高：0；
垫底：100%；
背景色：#晶圆；
}
.信{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
断字：断字；
字体大小：30px；
}

A.
B
C

没有专门的组件可以用语义来做这种事情。然而，一个简单的方法是创建一个小的react组件，它使用flex来集中您的内容

下面是一个例子，我修改了您提供的codesandbox

import React from "react";
import { Label, Icon } from "semantic-ui-react";

const Square = ({ background, color, children }) => {
  const squareStyles = {
    width: 150,
    height: 150,
    textAlign: "center",
    fontSize: 5 + "em",
    lineHeight: 1 + "em",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: `#${background}`,
    color: `#${color}`
  };

  return <div style={squareStyles}>{children}</div>;
};

const Sample = () => (
  <div>
    <Square background="21BA45" color="fff">
      G
    </Square>
    <Label>OR</Label>
    <Square background="1B1C1D">
      <Icon name="flag checkered" inverted />
    </Square>
  </div>
);

export default Sample;

从“React”导入React；
从“语义ui反应”导入{标签，图标}；
const Square=（{背景、颜色、子对象}）=>{
常数平方样式={
宽度：150，
身高：150，
textAlign：“居中”，
字体大小：5+“em”，
线宽：1+“em”，
显示：“flex”，
辩护内容：“中心”，
对齐项目：“中心”，
背景色：`${background}`，
颜色：`${color}`
};
返回{children}；
};
常量样本=（）=>(
G
或
);
导出默认样本；

---

谢谢@coreyward，我添加了一个指向codesandbox的链接，其中包含了我正在尝试做的事情。