css - 如何在父 div 中居中数据？

Question

我有一个 div，里面有文本和图像，它是 190px x 190px，我想让所有东西都垂直居中。

我尝试过查看 SO 和 Google，但似乎找不到一个简单的答案。

最简单的方法是什么？

小提琴

HTML：

<div class="block">
   <h2>TITLE</h2><br/>
      <img src="...." width="190px"/>
         <p>Hello world</p>
</div>

CSS：

.block {
    position:relative;
    width:190px;
    height:190px;
    background-color:FFF;
    margin:10px;
    float:left;
    left:-10px;
    text-align: center;
    padding:10px;
    border:solid 1px #CCC;
    font-size:small;
}

.block p {
    text-align: left;
}

Answer 1

您好，您可以使用这两个属性：

.block {
  display:table-cell;
  vertical-align:middle;
}

并删除float:left. 查看此演示http://jsfiddle.net/kGt54/17/并提出任何问题。

编辑

如果要保留，则float:left需要制作一个浮动并具有边距的外部容器：

.blockC {
  float:left;
  margin:10px;
} 

新演示http://jsfiddle.net/kGt54/29/

Answer 2

.block {
        position:relative;
        background-color:FFF;
        margin:10px;
        float:left;
        left:-10px;
        text-align: center;
        padding:10px;
        border:solid 1px #CCC;
        font-size:small;
    }

    .block p {
        text-align: center;
    }

只需删除width:190px;andheight:190px;中的.block{}and.blick p{}只需将其更改text-align : left;为text-align : center;我希望这就是您想要实现的目标.. 快乐编码。