Question

我有一个问题不仅仅是口语，但我找不到解决方案。

我有这个HTML：

 <section class="section" id="section-2">

        <div class="wrapper" id="wrapper">

            <div class="slider-container" id="slider-container">

                <figure class="panel-image">
                    <img src="imgs/projects/3d-particles-image.png">
                </figure>

                <figure class="panel-image">
                    <img src="imgs/projects/3d-particles-image.png">
                </figure>

            </div>

        </div>

    </section>

这个CSS：

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slider-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.panel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100%;
}

.panel-image > img { ????????? }

我需要将img置于图中心，但“面板图像”的位置必须是绝对的。有什么建议吗？

非常感谢！

Answer 1

这样的东西适用于现代浏览器：

.panel-image > img { 
position: absolute;
left: 50%;
top: 50%;

-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}

旧浏览器有更复杂的技巧。

Answer 2

谢谢@ ralph.m！工作正常!!

我找到了另一个解决方案：

.panel-image {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
}

.panel-image > img {
    margin: auto;
}

中心图像成图

2 个答案: