javascript - 垂直居中 div 溢出

Question

我一直在尝试将一个 div 元素置于另一个 div 中。 div 元素中有一个图像，但所有图像的高度都不同。我能够将它们水平居中，但垂直居中是一个挑战。我试过 transform: translateY(-50%);，但图像溢出到顶部的 div，这是顶部的菜单。这是 HTML 外观

<div class="main_menu">
...
</div>
<div class="container">
    <div class="current_photo">
        <a href="http://someurl" target=_blank">
            <div class="image-motion">
                <img src="./somefile.jpg" class="center_image">
            </div>
        </a>
    </div>
</div

这是CSS

.container {
    display : block;     
    position:relative;
    float: left;
    padding : 10px;
    width : 200px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;   
}

.current_photo {
    position: relative; 
    width: 100%;
    width : 290px;
    height: 210px;
    z-index : 0;
    margin-left: auto;
    margin-right: auto;
    resize: vertical;
}

.image-motion {
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

.image-motion img {
    max-width: 250px;
}

.image-motion img:hover {
    transform:scale(1.2);
}

img.center_image{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Answer 1

您可以尝试将 .container 的显示更改为 table:

.container {
    display: table;
}

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

https://css-tricks.com/centering-in-the-unknown/