将内容居中放在 div 容器的中间

Question

我正在尝试创建一个“平铺”（方形块），其内容完全居中在它的中间。

这是 HTML

  <div class="tile-facebook">
    <h5>Facebook</h5>
    <div class="tile-notification">4</div>
    <h4>notifications</h4>
  </div>

还有 CSS

.tile-facebook{
  width:175px;
  height:175px;
  background: #3b5998 ;
  text-align: center;
  border-radius: 10px;
  border-style: solid;
  border-color: #ccc;
  border-width:1px;
  color: white;
}

.tile-notification{
  font-size:80px;
  font-weight:bold;
  padding:10px 0px;

}

我将文本放在块的中间，但我希望它直接位于中间，顶部和底部的填充相同。想法？

Answer 1

您可能不设置高度，但使用伪元素或额外元素从框的任何宽度绘制正方形。

100% + inline-block 的垂直填充是一种绘制正方形并在其中间添加内容的方法。

<div class="tile-facebook">
    <div class="wrapper">
        <h5>
            Facebook
        </h5>
        <div class=" tile-notification ">
            4
        </div>
         <h4>
             notifications
        </h4>
    </div>
</div>

.tile-facebook {
    width:175px;
    background: #3b5998;
    text-align: center;
    border-radius: 10px;
    border-style: solid;
    border-color: #ccc;
    border-width:1px;
    color: white;
}
.tile-notification {
    font-size:80px;
    font-weight:bold;
}
.tile-facebook .wrapper * {
    margin:0;
}
.tile-facebook:before {
    padding-top:100%;
    content:'';
}
.tile-facebook:before,
.wrapper {
    display:inline-block;
    vertical-align:middle;
}

http://jsfiddle.net/cnq82/

关于垂直百分比填充或边距的一些解释：http://www.w3.org/TR/CSS2/box.html#padding-properties & http://www.w3.org/TR/CSS2/box.html#propdef-margin-top

所以，（希望它让它更清楚一点：））

如果您提供 100% 的垂直填充，则其高度将等于父级的宽度。

如果您希望高度大于 20px，您可以这样做：padding:100% 0 20px 0 ; 或 padding:20px 0 100% 0;

如果您想要一个比例为 4:3 的盒子，只需执行 padding-top:75%; 或 padding:50% 0 25% 0;。

伪元素或额外元素可以是浮动的，也可以是用于垂直对齐的内联块。

您不需要在父级的 CSS 中设置宽度。

Answer 2

此修复要求内容高度永远不会改变，您需要添加另一个<div>。

<div class="tile-facebook">
  <div class="center">
    <h5>Facebook</h5>
    <div class="tile-notification">4</div>
    <h4>notifications</h4>
  </div>
</div>

并添加 CSS：

.title-facebook {
    position: relative;    
}

.center {
    position: absolute;
    top: 50%;
    margin-top: -[half height];
    left:0;
    width: 100%;
}

其中[half height] 是.center div 高度的一半。

Answer 3

在此处将 margin: -30px; 添加到您的 CSS：

.tile-notification {
    font-size:80px;
    font-weight: bold;
    padding: 10px 0px;
    margin: -30px;
}