html - 将嵌套 div 与父 div 和 div 内的文本对齐的最佳方法是什么？

Question

所以我在这里做了这个例子：http: //jsfiddle.net/cRmCc/2/我想知道在不使用边距或填充的情况下垂直和水平对齐父 div 内的嵌套 div 的最佳方法是什么。更优选地是精确的中心。我将把它用作参考，而谷歌并没有多大帮助。谢谢！

HTML

<div class="container1">
    <div class="container2">
        Some Text
    </div>
</div>

CSS

.container1 {
    width:200px;
    height:200px;
    background-color:red;
}
.container2 {
    width:100px;
    height:100px;
    background-color:blue;
}

Answer 1

您可以将display:table-cell;and与andvertical-align:middle;一起使用text-align:center;display:inline-block;

更新小提琴

.container1 {
  width:200px;
  height:200px;
  background-color:red;
  text-align:center;
  display:table-cell;
  vertical-align:middle;    
}
.container2 {
  width:100px;
  height:100px;
  background-color:blue;
  display:inline-block;
}

注意：如果支持，您将需要对旧版浏览器进行回退。