Question

目标是使div中的文本垂直居中。 This answer建议使用display: flex和align-items: center，但不起作用。

Codepen：https://codepen.io/anon/pen/qgOJZg

<div id="messageBox" style="">
   <div class="message">YO THERE THIS ROCKS!</div>
</div>


#messageBox {
    min-width: 150px;
    padding: 15px 35px;
    position: absolute;
    margin-left: 50%;
    bottom: 0;
    background: #424242;
    color: #FFF;
    cursor: pointer;
    text-align: center;
    border-radius: 5px 5px 0 0;
    font-family: "Lato";
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 1

有太多要解释的东西。但是现在，只需看看updated fiddle。

首先，您的容器的内容高度即为文本框，仅此而已，因此文本框基本上位于其容器的中心。但是，当您给它一个height时，您会发现它不在中心。由于flex-box的性质，默认情况下它具有flex-direction: row。因此，您要将其更改为column（这是我在提供的jsFiddle中所做的），就差不多了。

CSS的结构也进行了一些适度的更改，但是您会发现它们自己；无需解释。

作为进一步的调查，position: absolute会让孩子成为flex-flow的孩子，就像它根本不是后代一样。使用flex-box时，大多数时候不需要绝对放置的元素。

再读一遍，请进一步检查this great article about flex-box at css-tricks.com；涵盖了所有内容，而且非常简单易学。

Answer 2

只需将您的#messageBox添加到此

#messageBox {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

实时示例：https://codepen.io/anon/pen/VgvEyY

Answer 3

@Crashalot：通过使用高度，我们可以实现，但是您也可以通过使用此代码在垂直方向居中。

#messageBox { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.message {
  position: relative;
  min-width: 150px;
  padding: 15px 35px;
  background: #424242;
  color: #FFF;
  cursor: pointer;
  cursor: pointer;
  text-align: center;
  border-radius: 5px 5px 0 0;
  font-family: "Lato";
  font-size: 17px;
}

<div id="messageBox" style="">
   <div class="message">YO THERE THIS ROCKS!</div>
</div>

在div中垂直居中放置文本：display：flex和align-items：center不起作用

3 个答案: