CODEWITHSUNDEEP
htmlcss
Jason Christopher
Jason Christopher

Reputation: 245

Centering div both vertically & horizontally without messing the div animation?

I know this issue has been discussed on other threads. However, I haven't found a working solution for the problem that I have is a bit different (maybe, if I am mistaken, sorry, I am still a junior at CSS).

So, I was trying to make a dummy website, where when you hover the mouse over the image at the center, it will flip horizontally and show you the content.

FLIP ANIMATION CREDITS TO David Walsh: https://davidwalsh.name/css-flip

HTML Code:

<div id="websitebackground">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper" >
            <div class="front" >
                <!-- front content --> 
               <img class="logocenter" src="images.svg" />
            </div>
            <div class="back">
                <!-- back content -->
            </div>
        </div>
    </div>
</div>

CSS Code:

#websitebackground
{
    min-height: 100vh; 
    min-width: 100vw;
    background-color: #34495e;
}

.logocenter {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*the rest flip animation is the same*/

How do I move the div to the middle? horizontally, vertically and also responsive, also without messing the animation.

I managed to center the div. However, the animation was a mess. the flip position is not where it should be. I want the image to keep positioned like this when it was flip or not:

http://www.corelangs.com/css/box/img/div-vertical-center.png

Thank you in advance.

Upvotes: 0

Views: 136

Answers (4)

Idris Dopico Pe&#241;a
Idris Dopico Pe&#241;a

Reputation: 175

From my perspective, the awnsers given are wrong. Flexbox is not supported by IE under 10 and android browsers, neither is view width and height. So I advise you to do the following:

HTML

Wrap the img in a container:

<div class="img-cont>    
    <img class="logocenter" src="images.svg" />
</div>

CSS

Give the container 100% width and height (relative on the container of 'img-cont'), and give 'img-cont' a pos absolute. Then u can give the animation a margin 0 auto.

html, body {
    width: 100%;
    height: 100%;
}

.img-cont {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flip-container {
    margin: 0 auto;
}

And some JS

Basically calculate the height of the page and placing the element in the center. Keep in mind that you might want to subtract the height of the element like so: 'var halfTop = ((site.height - parseInt($(el).height())) / 2) - 60;' (just an example)

var site = {
    resize: function() {
        // reset height and width
        site.width = parseInt($(window).width());
        site.height = parseInt($(window).height());

        $('.img-cont').each(function() {
            var el = $(this);

            var halfTop = ((site.height - parseInt($(el).height())) / 2);
            $(el).css('top' + halfTop + 'px');
        });

};

$(window).resize(function() {
    site.resize();
});

Upvotes: 0

Bart Karp
Bart Karp

Reputation: 659

First of all - centering in CSS is tricky, learn here how to do it properly.

In your case I would use Flexbox approach, so:

1. Center with Flexbox.

#websitebackground
{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    min-height: 100vh; 
    min-width: 100vw;
    background-color: #34495e;
}

Also remember to change flip-containers size, to the size of your image, in my case it's 100x100px, so:

2. Set the proper size of your animated element.

.flip-container, .front, .back {
    width: 100px;
    height: 100px;
}

3. Check the demo.

https://jsfiddle.net/m7wsLsnk/

enter image description here

Upvotes: 2

AlexG
AlexG

Reputation: 5919

Since you didn't provide a working example I shall give it a good guess. This hack should center any element inside a container with the class .center-child. Be sure that the container should only have one child.

Updated HTML:

<div id="websitebackground">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="center-child">
            <div class="flipper">
                <div class="front">
                    <!-- front content -->
                    <img class="logocenter" src="images.svg" />
                </div>
                <div class="back">
                    <!-- back content -->
                </div>
            </div>
        </div>
    </div>
</div>

Additional CSS:

.center-child {
    text-align: center;
    white-space: nowrap;
}

.center-child:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    // Adjusts for spacing
    margin-right: -0.25em;
}

.center-child > * {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
    white-space: normal;
}

Upvotes: 0

Tanasos
Tanasos

Reputation: 4098

If your project does not require legacy browser fallback, the simplest and fastest way to do this is using Flexbox.

Sample code (you will have to apply all types of prefixes in order for it to perform well on all browsers)

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

Where .container would be #websitebackground or whichever the flipping element's parent is.

Upvotes: 0

Related Questions