如何将两个图像叠加在一起？

Question

我需要的图像示例

我基本上复制了YouTube视频的代码。我是菜鸟，所以尽可能轻松地解释如何将两个图像叠加在一起。 它们具有相同的宽度和相同高度的图像，需要水平和垂直对齐。

＆＃13;

＆＃13;

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -260px;
}

＆＃13;

<div class="image">
  <img src="car.png">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有几种方法可以做到这一点。最简单的可能是编辑CSS以执行以下操作：

<强> CSS：

.image {
    width: 100%; /* Image container is now full-width */
}

.image img {
    margin: 40px auto; /* "auto" will center block elements */
    display: block; /* Set images to be "block" so they obey our auto margin */
}

<强> HTML：

<div class="image">
    <img src="path/to/image1.jpg">
    <img src="path/to/image2.jpg">
</div>

JSFiddle

对于水平和垂直居中：

虽然有些人可能更喜欢flex方法，但我更喜欢table-cell方法进行简单对齐。试试这个：

<强> CSS：

.image {
    width: 100%;
    height: 500px /* Modify this to fit your needs */
    display: table;
}

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

.image .centered img {
    margin: 40px auto;
    display: block;
}

<强> HTML：

<div class="image">
    <div class="centered">
        <img src="http://fillmurray.com/360/100">
        <img src="http://fillmurray.com/360/100">
    </div>
</div>

JSFiddle

Answer 2

如果问题只是将第二张图片放在第一个刚刚标记的下面 如果问题是在空白第2页上进行中心一对一的图像：

<table style="width: 100%; height: 100%; border-spacing: 0px; border-collapse: collapse; padding: 0px; margin: 0; border: 0;">
        <tr style="height: 100%">
            <td style="text-align: center; vertical-align: middle; height: 100%;">
                <img src="1.jpg" /><br><br>
                <img src="2.jpg" />
            </td>
        </tr>
    </table>

对于body和html，你还需要身高：100％

我很确定div的所有定位都是可能的，所以我可能会对表格很复杂但是我太累了，无法找到垂直定位的代码，所以我在工作中使用了表格。