Flexbox - 垂直居中文本[重复]答案

【问题标题】：Flexbox - center text vertically [duplicate]Flexbox - 垂直居中文本[重复]
【发布时间】：2017-06-15 20:12:26
【问题描述】：

我有一个方形的弹性盒子，它被一个超链接完全覆盖。

现在我想将弹性框的内容垂直居中。

但是，使用属性为display: table 的div 元素和属性为display: table-cell; vertical-align: middle 的嵌套div 不起作用，因为我失去了正方形。

如果我使用divs 而不是ul 和li，我将失去能够在任何地方点击的属性。

我希望“文本”在红色框的水平和垂直中心对齐：

body {
  margin: 0px;
  width: 100%;
}
main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.flex-container {
  width: 100%;
}
ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
}
li {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.red {
  background-color: red;
}
.white {
  background-color: white;
}
.tile:before {
  content: '';
  float: left;
  padding-top: 100%;
}
.tile {
  text-align: center;
}

<main>
  <div class="flex-container">
    <ul>
      <li class="red">
        <a href="/">
          <div class="tile">
            Text
          </div>
        </a>
      </li>
    </ul>
  </div>
</main>

【问题讨论】：

去掉多余的div，让链接本身的flex项目覆盖整个高度，并使其内容居中。

标签： html css flexbox centering

【解决方案1】：

main {
  height: 200px;
  width: 200px;
}
a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  height: 100%;
}

<main>
  <a href="/">
    <div class="tile">Text</div>
  </a>
</main>

【讨论】：

div 应该是一个 span，因为将块元素 (div) 嵌套在内联元素 (a) 中并不是一个好习惯
@AndrewBrntt，感谢您的信息，但这种做法已经过时了。对于 HTML5，锚元素 (a) 中的 div 元素是完全有效且可接受的做法。用更专业的术语来说，锚元素可以包含 flow 和 phrasing 内容。 Divs 代表流内容。 developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Properties
好吧，我不知道已经改变了谢谢

【解决方案2】：

在您的 .tile 声明中，您需要 flexbox 代码如下：

justify-content: center;
display: flex;
align-items: center;

你的 LI 声明应该只是 display:block 因为它没有使用 flexbox 属性。

【讨论】：

【解决方案3】：

按如下方式更改您的 CSS：

    .tile:before {
        content: '';
        float: left;
    }
    .tile {
        text-align: center;
        padding-top: 50%;
        padding-bottom: 50%;
    }

你不会失去你的方形，并且填充将始终居中文本。

你可以在这里查看：

https://plnkr.co/edit/BgPW9exwJpyxHFn5fMBP?p=preview

【讨论】：

【解决方案4】：

我删除了.tile 的:before 部分，并将其移至a 标记（现在已分类click-container。因为它感觉不应该在哪里。你想要@987654325 @ 元素本身是方形的，而不是它的内容。

现在我们有了一个方形锚点，你可以使用任何垂直对齐技巧来使内容居中，在这个例子中我使用了绝对+翻译技巧：

body {
  margin: 0px;
  width: 100%;
}
main {
  display:flex; 
  flex-wrap:wrap;
}
.flex-container {
  width: 100%;
}
ul {
  display: flex;
  flex-wrap:wrap;
  list-style: none;
  -webkit-padding-start:0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
}
li {
  display: flex;
  flex-direction: column;
  width: 50%;
}
.red {
  background-color: red;
}
.white {
  background-color: white;
}

/* edited code */
.tile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.click-container {
  display: block;
  text-align: center;
  position: relative;
}
.click-container:before{
  float: left;
  padding-top: 100%;
  content: "";
}

<body>    
  <main>
    <div class="flex-container">
      <ul>
        <li class="red">
          <a class="click-container" href="/">
            <div class="tile">
              Text
            </div>
          </a>
        </li>
      </ul>
    </div>
  </main>
</body>

【讨论】：