Html 垂直和水平定心多个div_Html_Css

Html 垂直和水平定心多个div

html css

Html 垂直和水平定心多个div,html,css,Html,Css,我有两张幻灯片放在一张幻灯片里。我想使用translateX和translateY方法将它们垂直和水平放置，以便它们都居中且一个在另一个之上/之后。问题是，我当前的代码将一个接一个地绘制它们：我怎样才能使它们都在中间，一个在另一个后面以下是CSS代码： .oa-modal { top: 50%; left: 50%; min-width: 320px; -webkit-backface-visibility: hidden; -moz-backface

我有两张幻灯片放在一张幻灯片里。我想使用translateX和translateY方法将它们垂直和水平放置，以便它们都居中且一个在另一个之上/之后。问题是，我当前的代码将一个接一个地绘制它们：

我怎样才能使它们都在中间，一个在另一个后面

以下是CSS代码：

.oa-modal {
    top: 50%;
    left: 50%;
    min-width: 320px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    position: fixed;
    height: auto;
}

.oa-slides {
    position: relative;
}
.oa-slide {
    position: relative;
    margin: 0 auto;
}

.oa-slide-1 {
    width: 120px;
    height: 50px;
    background-color: yellow;
}

.oa-slide-2 {
    width: 200px;
    height: auto;
    background-color: red;
}

和HTML：

<div class="oa-modal">

    <div class="oa-slides">
        <div class="oa-slide oa-slide-1">
            slide 1
        </div>

        <div class="oa-slide oa-slide-2">
            <p>slide</p>
            <p>2</p>
        </div>
    </div>
</div>

这里还有一个JSFIDLE链接：

不确定这是否是您要找的

   <html>
    <head>
    <style type="text/css">
    .oa-modal {
    top: 50%;
    left: 50%;
    min-width: 320px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: fixed;
    height: auto;
    }

    .oa-slide {
    position: relative;
    margin: 0 auto;
    }

    .oa-slide-1 {
    width: 50px;
    height: 50px;
    background-color: yellow;
    border:1px solid green;
    z-index:100;
    position:fixed;
    top:50%;left:50%;
    transform: translate(-50%, -50%);
    }

    .oa-slide-2 {
    width: 200px;
    height: auto;
    background-color: red;
    border:1px solid blue;
    }
    </style>
    </head>
    <body>
    <div class="oa-modal">
    <div class="oa-slides">
    <div class="oa-slide oa-slide-1">
    slide 1
    </div>
    <div class="oa-slide oa-slide-2">
    <p>slide</p>
    <p>2</p>
    </div>
    </div>
    </div>
    </body>
    </html>

如果这有帮助，请一定告诉我

谢谢

你的意思是想让它看起来像3D吗？不，我只是想让它们都在同一点上居中。你想要红色的在顶部还是黄色的？没关系。。红色或顶部的黄色。最终结果应该是这样的，但我正在寻找一个解决方案，它不受更改的影响。oa幻灯片的宽度或高度。如果我在这里这样做，我必须调整。oa-slide-1左侧和顶部位置。我怎样才能做到这一点？我对上述答案做了一些修改。请试试这个，并让我知道这是否工作良好。