如何创建正方形 Link，文本居中垂直对齐并自动换行？

Question

我认为使用简单的 display:inline-block 和 vertical-align:middle 会非常简单，但我尝试的任何方法都不起作用。

是否可以创建一个 100 像素 x 100 像素的正方形，文本水平和垂直居中并环绕，并且整个正方形是 link？

如果文本比正方形宽，则文本必须在下方换行，并且整个文本仍必须垂直和水平居中。

Answer 1

这是使用 display:flex 制作文本中心的一种方法。

.main {
    align-items: center;
    border: 1px solid;
    display: flex;
    height: 300px;
    justify-content: center;
    width: 300px;
}

<div class="main">
Some text in center
</div>

How to Create a Square Link with Text Vertically-Aligned in Center and Word-Wrapping?