Center image into figure

Question

I have a question that is more than spoken, but I can't find a solution.

I have this 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>

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

I need center the img into figure, but the position of "panel-image" need to be absolute. Any suggestions?

Thanks a lot!

Answer 1

Something like this works in modern browsers:

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

There are more elaborate tricks for older browsers.

Answer 2

Thanks @ralph.m! Works fine!!

I find another solution:

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

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