将图像居中放置在图形中

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 { ????????? }

我需要将图片居中在figure中，但是"panel-image"的位置需要是绝对定位。有什么建议吗？

非常感谢！

- eledgaar

---

好的，它似乎是水平居中的（http://jsfiddle.net/franciscop/f9nvLz9n/）。问题出在哪里？垂直方向？还是其他方面？ - Francisco Presencia

是的，问题在垂直居中。 - eledgaar

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

对于旧版浏览器，有更为复杂的技巧。

- ralph.m

Answer 2

感谢 @ralph.m！很好用！我找到了另一个解决方案：

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

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

- eledgaar