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

Question

我想在一个正方形div中居中一个任意角色.我承认这听起来像一个非常简单的任务,但我尝试过的任何东西都没有用(而且我尝试了很多东西!)¹.

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

编辑:

我想到目前为止,我已经收到了答案,在这里.由Jedidiah和Ashok Kumar Gupta(第二和第三个div)给出的解决方案产生了非常相似的结果,但是(也许我看到了事情),第三个div中的is 只是垂直中心上方的头发.

---

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

Answer 1

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

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

例如:http://codepen.io/Jedidiah/pen/rLfHz

Answer 2

使用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。

Answer 3

这个问题有点老了，但当你搜索“center single letter in square css”时，这是第一个答案

所以在2018年你可以简单地做

#center {

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

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

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