javascript - 在响应式 div 中居中 div 的最佳方式

Question

几个小时以来，我一直在尝试将一个没有特定宽度或高度的 div 在具有 max-width 和 max-height< 的父 div 中垂直和水平居中 但会响应。我查看了 CSS 和 JS/jQuery 选项，但都没有正常工作。

As you can see ，它是视频的缩略图预览。当处于 normal 状态时，它只显示上面带有播放图标的缩略图。在 hover 状态下，它将播放按钮更改为橙色按钮，显示标题，并在缩略图上方覆盖一层黑色透明。

现在，如果网站没有响应，使用 CSS 可以很容易地做到这一点。但是，随着浏览器宽度的减小，缩略图大小也会减小。

这是我正在使用的 HTML:

<article class="movie"><a href="#">

    <div class="movie-overlay">

        <div class="movie-play"></div>

        <h2 class="movie-title">Title Goes Here</h2>

    </div> <!-- end .movie-overlay -->

    <div class="movie-thumb"><img src="thumbs/thumb.jpg"/></div>

</a></article> <!-- end #post- -->

这是我的 CSS:

.movie-archive .movie {
    width: 50%;
    height: auto;
    max-width: 480px;
    position: relative;
    overflow: hidden;
    float: left;
}

.movie-archive .movie .movie-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
}

.movie-archive .movie:hover .movie-overlay {background: rgba(0, 0, 0, 0.6);}

.movie-archive .movie .movie-play {
    background: url("images/play-icon@2x.png") no-repeat center 0;
    background-size: 94px 190px;
    width: 100%;
    height: 95px;
}

.movie-archive .movie:hover .movie-play {background-position-y: -95px;}

.movie-archive .movie .movie-title {
    font-size: 17px;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #ffffff;
    display: none;
    padding: 10px 50px 0;
}

.movie-archive #latest-top.movie:hover .movie-title, .movie:hover .movie-title {display: block;}

.movie-archive .movie .movie-thumb img {
    width: 100%;
    height: 100%;
    display: block;
}

我尝试了各种方法，从添加另一个 div 和使用 display: table 技巧到添加百分比填充，以及使用 JS。似乎没有任何效果。有没有人有什么建议？我真的很感激。谢谢!

这并不重要，但我正在为这个网站使用 WordPress。

Answer 1

你想要居中的容器和元素应该有这样的属性:

.movie-archive .movie {
    width: 50%;
    height: auto;
    max-width: 480px;
    position: relative;
    overflow: hidden;
    float: left;
}

.movie-archive .movie .movie-overlay {
    width: 100%;
    height: 100%;
    left: 50%;
    margin-left: -50%; //half of width
    top: 50%;
    margin-top: -50%; //half of height
    position: absolute;
    text-align: center; //only if you want the text to be centered
}

来源:http://designshack.net/articles/css/how-to-center-anything-with-css/