如何在方形div中垂直和水平居中单个字符

Posted 2021-03-27

我想在一个正方形div中居中一个任意角色。我承认这听起来像一个非常简单的任务，但我尝试过的任何东西都没有用（而且我尝试了很多东西！）1。

为了具体，让我们说div的高度和宽度等于20ex，让我们说单个字符就是所谓的“乘法符号”：✕，漂亮且对称。我希望这个角色位于20ex-by-20ex方形div内，使得两个笔划交叉的点在div内垂直和水平都是死点。

编辑：

我尝试了迄今为止收到的答案，here。由Jedidiah和Ashok Kumar Gupta（第二和第三个div）给出的解决方案产生了非常相似的结果，但是（也许我看到了事情），第三个div中的is只是垂直中心上方的头发。

---

1我已经了解到，无论布局任务看起来多么令人难以置信的直截了当，我仍然需要花费数小时，数小时才能找到实现它的CSS。

答案

将行高设置为容器的高度应该这样做。

text-align: center;
line-height:20px;
width:20px;
height:20px;

示例：http://codepen.io/Jedidiah/pen/rLfHz

另一答案

使用display:table-cell和vertical-align:middle和text-align:center。在你的CSS中像这样：

#center{
    width:100px;height:100px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

display:table-cell必须能够使用vertical-align将内容放在div上（不要问我为什么有人决定这样做:)）。

看到这个JSFiddle。

另一答案

这个问题有点陈旧，但在注意到OP的编辑之后：

我尝试了迄今为止我收到的答案。由Jedidiah和Ashok Kumar Gupta（第二和第三个div）给出的解决方案产生了非常相似的结果，但是（也许我看到了事情），第三个div中的is只是垂直中心上方的头发。

我想张贴，如果你使用×而不是✕，中心看起来好多了。

https://codepen.io/persianturtle/pen/zPKbRj

另一答案

这个问题有点旧，但是当你搜索“方形css中的单个字母”时，这是第一个答案

所以在2018年你可以做到

#center {

   width: 0;
   height: 0
   display: flex;
   justify-content: center;
   align-items: center;
}

• justify-content: center水平对齐
• align-items: center垂直对齐

请注意，无论div的形状如何，它都可以工作，也可以是矩形。

另一答案

回答你的问题：

<div style="width: 20em;height: 20em; background: red;display: table;">
<p style="display: table-cell;text-align: center;vertical-align: middle;">X</p></div>

注：背景：红色;仅用于可视化。

:)

另一答案

使用css只是不可能在div中垂直和水平居中单个字符，因为它取决于浏览器用于渲染字符的字体。

对于那些只想以“X”为中心的人来说，使“X”透明，创建：before和：after伪元素更安全，给它们一个薄的宽度和一个与初始颜色相同的背景“ X“，然后将它们旋转+或 - 45度。

html代码：

<div>X</div>

CSS代码：

* {
  box-sizing: border-box;
}

div {
  font-size: 2em;
  position: relative;
  border: 1px solid black;
  width: 2em;
  height: 2em;
  color: transparent;
}

div:before,
div:after {
  content: "X";
  display: block;
  z-index: 1;
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.9em;
  right: 0.9em;
  background-color: black;
}

div:before {
  transform: rotate(45deg);
}

div:after {
  transform: rotate(-45deg);
}

这是一个jsfiddle：https://jsfiddle.net/z4pmu7r9/