Best way to center div in responsive div

Question

I've been trying for several hours to both vertically and horizontally center a div with no specific width or height in a parent div that has a max-width and max-height but will be responsive. I've looked at both CSS and JS/jQuery options with nothing working properly.

As you can see, it's a thumbnail preview for a video. When in a normal state, it just shows the thumbnail with a play icon above it. In a hover state, it changes the play button to an orange one, displays the title, and has a black transparent overlay above the thumbnail.

Now, this would be easy to do with CSS if the site wasn't responsive. But, as the browser width decreases, the thumbnail sizes decrease.

Here's the HTML I'm using:

<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- -->

And here's my 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;
}

I've tried various things from adding another div and using the display: table trick to adding padding as a percentage, and using JS. Nothing seems to work. Does anyone have any suggestions? I would really appreciate it. Thanks!

Not that it really matters, but I am using WordPress for this site.

This may help: http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height/18516474#18516474 — Hashem Qolami, Mar 10 '14 at 17:53
And this may be of interest: http://www.tipue.com/blog/center-a-div/ — Whymarrh, Mar 10 '14 at 18:06
@HashemQolami thanks for the article. Unfortunately I could not get it to work. — Connor, Mar 10 '14 at 18:56
@Whymarrh the problem is I don't know the width/height of the divs. — Connor, Mar 10 '14 at 18:56

JelteF · Answer 1 · 2014-03-11T04:40:04.340

1

The container and the elemented you want centered should have properties like this:

.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
}

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

edited Mar 11 '14 at 04:40

answered Mar 10 '14 at 18:03

JelteF

3,021
2
27
35

[This](http://cl.ly/UL9N) is what happens when I replace my code with yours. And idea why? – Connor Mar 10 '14 at 18:12
sorry, stupid typo. The margins should have been `-50%` – JelteF Mar 11 '14 at 04:39
That's not really working either. [Here's what it looks like](http://cl.ly/UOKI). Note, I disabled `overflow: hidden` temporarily so you can see what it does. It seems when I edit the code to `top: 89%` it works. Any idea why? – Connor Mar 12 '14 at 14:28
I hove no clue why that works. But it seems like You are centering the wrong thing at the moment. You should try centering the play button in the overlay instead of the overlay over the movie. Search for "With fluid width" in the article I linked and you can probably figure it out by yourself – JelteF Mar 12 '14 at 14:44

score 0 · Answer 2 · answered Mar 10 '14 at 18:07

0

try this:

$(document).ready(function() {w = $(window).width();
h = $(window).height();
jQuery.each($('.centerony'), function(i, val) {
lung = $(val).css('height');
a = (h * 0.5) - ((parseInt(lung)) * 0.5);
$(val).css('position', 'absolute');
$(val).css('top', a + 'px')
});
jQuery.each($('.centeronx'), function(i, val) {
larg = $(val).css('width');
a = (w * 0.5) - ((parseInt(larg)) * 0.5);
$(val).css('position', 'absolute');
$(val).css('left', a + 'px')
});

$(window).resize(function() {
k = $(window).width();
z = $(window).height();
jQuery.each($('.centeronx'), function(i, val) {
larg = $(val).css('width'); 
a = (k * 0.5) - ((parseInt(larg)) * 0.5);
$(val).css('left', a + 'px')
})
jQuery.each($('.centerony'), function(i, val) {
lung = $(val).css('height');
a = (z * 0.5) - ((parseInt(lung)) * 0.5);
$(val).css('position', 'absolute');
$(val).css('top', a + 'px')
});
});
});

Add to the element you want to center class 'centerony' and class 'centeronx', and set parent's div (the one which has max-width and max-height with position:relative. It should work.

<div id="outdiv" class="outside" style="position:relative">

<div class="in_div centerony centeronx">I am centered!</div>

</div>

You have to use include jQuery to use it. :)

PAY ATTENTION ------- the code i wrote works according to window's size, and not parent's div size. If you want to adapt to your case, change the values of vars w,h,k,z, making their value in relation with parent's div size instead of window size. for example w = $('#outdiv').width() instead of w = $(window).width();

answered Mar 10 '14 at 18:07

Morrisda

1,380
1
11
25

For some reason the value for `top` and `left` are too much. [See this image](http://cl.ly/UM6P). Thanks! – Connor Mar 10 '14 at 18:22
have you changed the vars w,h,k,z ? @Connor – Morrisda Mar 10 '14 at 18:41
No I didn't even though you wrote "PAY ATTENTION". Whoops! :) I just changed it from `window` to `'.movie'` and no luck. Any idea why? – Connor Mar 10 '14 at 18:53
if you've changed w,h,k,z and you set your parent's div position to relative, it should work. try to get parent's div using an id instead of a class, cause if you use this class more than once it could makes problem. – Morrisda Mar 10 '14 at 20:20
It needs to be a class because the element appears more than once. – Connor Mar 11 '14 at 02:04
you have to select with this the div that contains your divs you have to center, not the divs you have to center!! @Connor – Morrisda Mar 11 '14 at 13:54
Yes, I know. I am trying to select `.movie` which is the parent of `.movie-overlay` (the div that will be centered). – Connor Mar 12 '14 at 14:24

Best way to center div in responsive div

2 Answers2