将屏幕中间的两个 div 与其中的图像对齐答案

【问题标题】：align two divs in the middle of the screen with an image inside them将屏幕中间的两个 div 与其中的图像对齐
【发布时间】：2013-09-21 01:26:54
【问题描述】：

我有以下 html（最小）模板：

<body>
    <div class="container">
        <div class="top"><img src="img/hyphen_top.png" width="177" height="150"/></div>
        <div class="bottom"><img src="img/hyphen_bottom.png" width="117" height="6"/></div>
    </div>
</body>

仅使用 css，我想将页面/屏幕中间的“顶部”div 和“顶部”div 下的“底部”div 对齐，边距顶部 100 像素。我无法将顶部/底部以及主容器（“容器”）中的图像居中。

谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

.container {
    text-align:center;
}
.bottom {
    margin-top: 100px;
}

jsfiddle 在这里：http://jsfiddle.net/5xTLh/

【讨论】：

【解决方案2】：

这是Fiddle

.container {
  width: 600px;
  margin: 20px auto;
  border: 1px solid #333;
}
.top {
  width: 300px;
  margin: 20px auto;
  text-align: center;
}
.bottom {
  width: 300px;
  margin: 100px auto 0;
  text-align: center;
}

【讨论】：

“顶部”容器内的图像似乎没有在屏幕中间居中:(
居中，看小提琴。