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

【问题标题】：What's the best way to align nested divs to parent divs and text inside divs?将嵌套 div 与父 div 和 div 内的文本对齐的最佳方法是什么？
【发布时间】：2013-05-24 05:45:17
【问题描述】：

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

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;
}

【问题讨论】：

搜索 css vertical align 或 css vertical center 没有有用的结果？我很惊讶...vanseodesign.com/css/vertical-centering

标签： html css alignment

【解决方案1】：

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

Updated Fiddle

.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;
}

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

【讨论】：